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

1） 如果您有Google Plus帐户，请转到您的主页

2） 在右边，有一个“添加到圆圈”按钮列表，您可以将鼠标悬停在上面

3） 请注意，当您将鼠标悬停在“添加到圆”下拉列表上时（如果您有足够的圆可以在下拉列表中滚动），页面滚动功能将被禁用。只允许在下拉列表中垂直滚动

如何使用javascript实现这一点？

---

我可以在这里滚动（右侧的滚动条），但在下拉时无法在页面正文上滚动。

如果有一个具有固定高度且自动溢出的元素，他们将使用以下技巧设置滚动条的样式：

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

我会这样做：

但是有很多jquery插件可以做到这一点：

---

这不是通过JavaScript实现的

它是纯CSS，仅在（非移动）基于webkit的浏览器上工作

这是CSS代码，只需将其包含在CSS文件中，将其附加到HTML文档，然后运行.HTML文件。 下面是一个演示：

下面是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是如何阻止默认页面滚动的（同时仍然允许在悬停区域滚动）。@Max Hoff:我想你不明白这个解决方案。谷歌确实使用了一个自动溢出的元素，并为基于webkit的浏览器使用了一个自定义滚动条。我给你的是这个问题的交叉解决方案。但基本上和谷歌的情况完全一样。现在检查：。一旦滚动到div的底部，就会在主体中继续滚动。我希望禁用正文滚动。