javascript - 像 Google Plus 一样劫持页面滚动？

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