45

Facebook just updated chat (yet again) and now a new fixed side bar stays on the left of the screen. when its contents overflow, a scroll bar appears, but only if scrolled with the mouse wheel or if mouse moves over (or near) the scroll bar. It fades out if the mouse is not over it. it is very useful for thing windowed objects (such as the chat itself). So how does it work?

PS i am looking for a pure html5/css/javascript solution (no jquery or such), no browser support necessary, should work in latest chrome and nothing more, since i am making an app for chrome only.

Achshar
  • 5,153
  • 8
  • 40
  • 70
  • 1
    check this: http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm works in IE also.. –  May 07 '12 at 10:56
  • Hi, I looked at the answers below but none of them address the popover that is clicked, only the scrollbar. When I tried implementing the solution (using twitter bootstrap) the popovers get cutoff as the overflow on the parent div is set to scroll. Did you get this working? – Redwall Mar 14 '13 at 10:22

4 Answers4

62

Here is an update to Stephen P.'s post to have a styled scroll bar.

http://jsfiddle.net/PVZB8/139/

-Mike

Michael G.
  • 660
  • 6
  • 2
  • 3
    well yes! that's is exactly how it behaves on Facebook! although i would suggest you add a quick summary of how you achieved it to the answer. Someone would have to dig into the code (which is quiet a lot more then i expected it to be :P) to understand how its done. Otherwise, great answer. Thanks! – Achshar Nov 04 '11 at 09:44
  • 8
    I would upvote if your answer actually included the code along with an explanation of how it achieves what it does. It ensures that this site can [stand on its own two feet](http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers/8259#8259) instead of being dependent on external links. Link rot unfortunately is a reality and even jsfiddle can't be guaranteed to co-exist with stack overflow forever. – Marjan Venema Apr 22 '13 at 06:50
  • 11
    Stickling point: this jQuery+jQuery-UI answer was picked as the best answer, despite the fact that the request was for "no jquery or such". While this works, I found this post looking for how to do this *without* jQuery, and now still don't have a good answer =) – Mike 'Pomax' Kamermans Jun 05 '13 at 15:37
41

You set the overflow to none normally and change it to have overflow-y: scroll on hover.

See http://jsfiddle.net/PVZB8/

Stephen P
  • 14,422
  • 2
  • 43
  • 67
  • also the scroll bar only appears when the mouse moves over (or very close) to the scroll bar and not the whole element.. – Achshar Aug 20 '11 at 11:39
  • @Achshar - Really? On the [fiddle I created](http://jsfiddle.net/PVZB8/) the scroll bar appears when I move the mouse anywhere over the div approaching from any side. (Using Firefox 3.6.12 and 5.x) What browser are you trying it with? – Stephen P Aug 22 '11 at 17:53
  • oh yes.. in my #2 comment i was talking about Facebook.. that is what happens on Facebook. i think the comment was a bit confusing. on Facebook, the scroll bar only appears when the mouse moves close to the scroll bar and not when the mouse enters the element.. (which makes sense, otherwise the constant and sudden appearance of a scroll bar can be annoying). also it does not just appears, it fades. – Achshar Aug 22 '11 at 20:09
  • Fading can be done with `CSS3` transitions (supported by very few browsers) or using Javascript. jQuery for example has [fading effects](http://api.jquery.com/category/effects/fading/) built into it (see [this SO question](http://stackoverflow.com/questions/393254/jquery-fading-in-and-out) for more). I believe FB has their own, but I don't do FB programming so I couldn't tell you for sure. – Stephen P Aug 22 '11 at 21:30
  • i am familiar with css3 transitions.. and as i said i don't need to worry about browser support as my app is chrome only. But the question is `How do i make the transition affect only the scroll bar and not it's content`. the other problem (showing only when mouse nears the scroll bar) can be handled if the previous question can be answered. so that is the last thing that is required. – Achshar Aug 23 '11 at 10:50
  • Hi, how do you get the popovers to work with this solution? I tried here http://jsfiddle.net/bNFAf/1/ but they get cut off with the overflow set to scroll...Not sure how Facebook do that? – Redwall Mar 14 '13 at 10:26
  • although this works great on desktop browsers, unfortunately it fails in mobile browsers (e.g. Safari on the iPhone) — seemingly due to the fact that mobiles don't really recognize the :hover effect. Is there a workaround for mobiles that would go with this CSS solution? – Mo Boho Sep 14 '13 at 19:21
  • @MoBoho on a mobile you can scroll by dragging the screen around, you don't need a scrollbar. I think personally I would just *not* hide the overflow in the first place, or make it overflow: scroll all of the time on a mobile. – Stephen P Sep 18 '13 at 19:05
  • @StephenP I understand what you mean....however, how would we set that rule for mobile devices only? – Mo Boho Sep 19 '13 at 18:44
  • @MoBoho generally you'd use CSS3 media queries, which there are tons of questions about here on SO already, or you can use JS mobile device detection techniques (I don't like browser detects) – Stephen P Sep 19 '13 at 23:51
  • Doesn't work on mobile. – Wex Jul 01 '15 at 22:51
  • @Wex - no, it doesn't, because it works off the CSS pseudo-selector, and _touch_ doesn't support `:hover` — you're either touching or not touching. If, someday, touch screens detected you were close-but-not-touching and therefore supported hover then it would probably work. However, the OP's question was specifically about the mouse, not mobile: _"if **mouse** moves over (or near) the scroll bar"_. – Stephen P Jul 01 '15 at 23:03
  • 1
    Still, probably a notable point since setting `overflow: none` prevents scroll functionality on mobile. – Wex Jul 01 '15 at 23:17
19

This might not be the exact answer to the question, because it is asked for a solution without jQuery. But I came here via a search engine and I am using jQuery. If you want a solution that feels as smooth as and looks exactly like in facebook, take a look at this:

See http://rocha.la/jQuery-slimScroll

iblue
  • 29,609
  • 19
  • 89
  • 128
5

I would like to revive this thread for the benefit of future visitors and essentially sum up the other answers to this thread. I prefer jsFancyScroll (thanks Leo Selig!) as well as nanoScrollerJS (thanks ip!) because they both "retain the natural scrolling experience provided by the OS." Just try searching for a selection of text and then looking at the location of the scrollbar in the various implementations to see what I mean.

If you don't care for styling the scrollbar and just want it to auto-hide, Stephen P's answer looks to be the most elegant and best supported.

Community
  • 1
  • 1
Kevin Jin
  • 1,536
  • 4
  • 18
  • 20