像 Google Plus 一样劫持页面滚动? [英] Hijack page scrolling like Google Plus?

问题描述

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

1) If you have a Google Plus account, go to your home page.

2) 在右侧，有一个添加到圆圈"按钮列表，您可以将鼠标悬停在上面.

2) On the right side, there's a list of "Add to Circle" buttons that you can hover over.

3) 请注意，当您将鼠标悬停在添加到圈子"下拉列表之一上时(如果您有足够的圈子可以在下拉列表中滚动)，页面滚动功能将被禁用.仅允许在下拉列表中垂直滚动.

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.

这是如何使用 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.

推荐答案

有一个元素具有固定的高度和自动溢出，他们用这个技巧来设置滚动条的样式:http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/

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/

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

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.

这是我的方法:http://jsfiddle.net/kGbbP/4/

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

But there are many jquery plugins that can do this: http://www.net-kit.com/jquery-custom-scrollbar-plugins/

这篇关于像 Google Plus 一样劫持页面滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！