劫持页面滚动像谷歌加？

Question

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

2)在右侧,有一个可以悬停的"添加到圆圈"按钮列表.

3)请注意,当您将鼠标悬停在其中一个"添加到圆圈"下拉列表中时(如果您有足够的圆圈可以在下拉列表中滚动),则会禁用页面滚动功能.只允许在下拉列表中垂直滚动.

这是如何用javascript完成的？

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

Answer 1

有一个具有固定高度并且自动溢出的元素,它们使用这个技巧来设置滚动条的样式: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/

Answer 2

这不是通过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;}