劫持页面滚动像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.

推荐答案

具有一个具有固定高度并自动溢出的元素，他们使用以下技巧为滚动条设置样式:

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屋！