4

1) If you have a Google Plus account, go to your home page.

2) On the right side, there's a list of "Add to Circle" buttons that you can hover over.

3) Notice that when you hover over one of the Add to Circle dropdown (if you have enough circles to have scrolling in the dropdown) the page scrolling feature is disabled. Only scrolling vertically in the dropdown is allowed.

How is this done with javascript?

enter image description here

I can scroll in here (the scroll bar on the right), but can't scroll on the page body while this is dropped down.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
Danny Anges
  • 237
  • 5
  • 10

2 Answers2

9

The have an element that has a fixed height and is overflow auto, they styles the scrollbar with this trick: http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/

You could make it work in FF and IE to: Basically you nest a element that is overflow auto into a other and hide the scrollbar with a negative margin. Then you capture the scroll event on that same element and adapt the slider on the right side according to the scrollTop position.

Here is how i would do it: http://jsfiddle.net/kGbbP/4/

But there are many jquery plugins that can do this: http://www.net-kit.com/jquery-custom-scrollbar-plugins/

meo
  • 30,872
  • 17
  • 87
  • 123
  • How could I achieve it on my own? (Basic steps appreciated.) – Danny Anges Aug 03 '11 at 09:29
  • Also: how do you capture the browser scroll event? None of those plugins seem able to do so. – Danny Anges Aug 03 '11 at 09:39
  • I don't think you understand the problem. I want to know how GooglePlus prevents the default page scrolling (while still allowing scrolling in the hover area). – Danny Anges Aug 03 '11 at 10:33
  • 1
    @Max Hoff: i think you don't understand the solution. Google does use a element that is overflow AUTO and uses a custom scroll bar for webkit based browsers. What i gave you is a crossbrowser solution to this problem. But basically its EXACTLY the same then in google. – meo Aug 03 '11 at 10:36
  • Nope. Check it now: http://jsfiddle.net/75N3e/. Once you scroll to the bottom of the div, you keep scrolling in the body. I want the body scrolling to be disabled. – Danny Anges Aug 03 '11 at 11:01
  • @Maxx Hoff then add this on hover: http://stackoverflow.com/questions/3656592/programmatically-disable-scrolling – meo Aug 03 '11 at 11:14
8

this isn't made via JavaScript!

It's pure CSS, and works only on (non-mobile) webkit based browsers.

Here is the CSS code, just include it in a CSS file, attach it to an HTML document, and run the .html file. Here is a demo: http://jsfiddle.net/3ZqGu/

And here is the CSS code:

::-webkit-scrollbar {
background:transparent;overflow:visible; width:15px;}
::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,0.2); border:solid #fff;}
::-webkit-scrollbar-thumb:hover {
background:rgba(0,0,0,0.4);}
::-webkit-scrollbar-thumb:horizontal {
border-width:4px 6px;min-width:40px;}
::-webkit-scrollbar-thumb:vertical {
border-width:6px 4px;min-height:40px;}
::-webkit-scrollbar-track-piece{ 
background-color:#fff;}
::-webkit-scrollbar-corner {
background:transparent;}
::-webkit-scrollbar-thumb {
background-color: #DDD;}
::-webkit-scrollbar-thumb:hover {
background-color: #999;}
Community
  • 1
  • 1
Special K.
  • 521
  • 1
  • 8
  • 18