A scrollable area with the overflow hidden but no scroll bar
Is there a way of having an overflowing div that hides the overf开发者_运维问答low, 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.
加载中,请稍侯......
精彩评论