Hijack page scrolling like Google Plus?

Question

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?

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

Answer 1

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/

Answer 2

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;}