1

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

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Phil
  • 1,110
  • 1
  • 9
  • 25
  • 7
    How else will the user know that the `
    ` is scrollable with the mouse wheel if there isn't a scrollbar?
     – BoltClock Sep 21 '10 at 18:48
  • 2
    Further to @BoltClock's a Unicorn's (+1) comment: please don't. I like my consistent UI features. When they're broken it's frustrating. – David Thomas Sep 21 '10 at 18:49
  • I agree that it would be rare that this would be a good thing, I was just surprised to find it's impossible to do. To appease all parties involved I have overhauled the page in question so it is no longer an issue. Thanks for the input, I didn't expect a technical question to get an aesthetics answer, but a right answer is a right answer! – Phil Sep 27 '10 at 12:35

1 Answers1

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.

Don H
  • 891
  • 2
  • 15
  • 24
  • I've marked this as the correct answer as I've been convinced it was a bad idea in the first place. Thanks to @BoltClock's a Unicorn as well. – Phil Sep 27 '10 at 22:29
  • Cheers. Well done for finding a way to rework the page and avoid the issue. – Don H Oct 03 '10 at 20:40
  • The Flixster chrome app (in the Chrome store) does this in the sidebar. I have not figured out yet how they accomplished it. Also, the Tweetdeck app in Chrome has a scrollable areas for each column - and the columns don't use real scrollbars (I think they area replaced with custom control) – BuddyJoe Aug 07 '12 at 01:20