A Scrollable Area With The Overflow Hidden But No Scroll Bar

Is there a way of having an overflowing div that hides the overflow, doesn't have a scroll bar but is still scrollable (by means of the mouse wheel / touch input)? e.g.

Solution 1:

What you're doing is telling the browser that the content is scrollable, but at the same time trying to tell it to not behave as if it is scrollable. I'm not sure this is a sensible idea.

The closest idea I could find is an IE-dependent approach, styling the scrollbars with your own colour scheme:

#div {
margin: 0 0 0 0;
padding: 0 0 0 0;
scrollbar-face-color: #666666;
scrollbar-highlight-color: #333333;
scrollbar-shadow-color: #222222;
scrollbar-3dlight-color: #888888;
scrollbar-arrow-color: #ff0000;
scrollbar-track-color: #222222;
scrollbar-darkshadow-color: #111111
}

If you were to change the colours to match your div's background, that might be an idea. However, it's important to note that it is an IE-only behaviour.

Share