A scrollable area with the overflow hidden but no scroll bar_问答_开发者

A scrollable area with the overflow hidden but no scroll bar

开发者 https://www.devze.com 2023-01-17 13:34 出处：网络

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)?

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.