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.
<!DOCTYPE html>
<div id="longtext" style="width:100px; height:100px;">
Lorem ipsum....
</div>
My CSS attempts have failed as overflow: hidden; stops the area being scrollable whilst overflow: auto/overflow: scroll has the scrollbars.
Thanks in advance
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.