7

这是 jsFiddle 以便更好地理解：http: //jsfiddle.net/BzYcZ/

我有一些带有滚动条的 div。

我想要的是当我使用鼠标滚动在到达 div 的末尾时停止滚动而不是滚动整个页面。

发生的事情是，当我到达 div 的末尾时，整个页面开始滚动。

我知道这是浏览器驱动的，但是是否有一些 JS 事件可以处理这种情况并防止滚动整个页面，因为我的光标在这个 div 元素上。

编辑：

我希望能够滚动整个页面，但只有当我的鼠标离开这个 div 时。

解决方案

.noscroll
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

这是 JavaScript 部分：

$('.small_content').hover(
    function () {
        $('body').addClass('noscroll');
    }, 
    function () {
        $('body').removeClass('noscroll');
    }
 );

这是工作 jsFiddle 的链接：http: //jsfiddle.net/BzYcZ/3/

4

2 回答 2

3

您可以使用 jQuery 并冻结 body/html 的任何滚动条

（顺便说一句，jQuery 是一个 Javascript 库，它使编码变得更容易和更快：http: //jquery.com/）

例子：

$('.yourdivclass').hover(
function () {
    $('html, body').css("overflow", "hidden");
},
function () {
    $('html, body').css("overflow", "auto");
});

更新：

要保留滚动条并禁用它们，请遵循以下解决方案：禁用滚动而不隐藏它？

这里的例子：http: //jsfiddle.net/BzYcZ/2/

此处更新了 Javascript：

$('.small_content').hover(
function () {
   $('body').addClass('noscroll');
},
function () {
    $('body').removeClass('noscroll');
});​

额外的 CSS：

body.noscroll
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}
于 2012-08-08T14:16:03.987 回答
0

overflow:hidden如果您根本不想滚动正文容器，您可以向正文添加属性，或者您可以使用 jQuery 冻结正文容器滚动条，就像在 Facebook 所做的那样。

于 2012-08-08T14:18:29.980 回答