劫持页面像Google Plus一样滚动?

1)如果您有Google Plus帐户,请转到您的主页。

2)在右侧,有一个可以hover在其上的“添加到圆圈”按钮列表。

3)请注意,当您将鼠标hover在“添加到圆圈”下拉列表中时(如果您有足够的圆圈可以在下拉列表中滚动),则会禁用页面滚动function。 只允许在下拉列表中垂直滚动。

这是如何用javascript完成的?

在此处输入图像描述

我可以在此处滚动(右侧的滚动条),但在下拉时无法在页面主体上滚动。

有一个具有固定高度并且自动溢出的元素,它们使用这个技巧为滚动条设置样式: http : //beautifulpixels.com/goodies/create-custom-webkit-scrollbar/

你可以使它在FF和IE中工作:基本上你将一个溢出的元素嵌套到另一个中并隐藏带有负边距的滚动条。 然后捕获同一元素上的滚动事件,并根据scrollTop位置调整右侧的滑块。

我将如何做到这一点: http : //jsfiddle.net/kGbbP/4/

但是有许多jquery插件可以做到这一点: http : //www.net-kit.com/jquery-custom-scrollbar-plugins/

这不是通过JavaScript制作的!

它是纯CSS,仅适用于基于(非移动)webkit的浏览器。

这是CSS代码,只需将其包含在CSS文件中,将其附加到HTML文档,然后运行.html文件即可。 这是一个演示: http : //jsfiddle.net/3ZqGu/

这是CSS代码:

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

我遇到了这个链接,我尝试了一个很棒的作品

Google Plus滚动样式