Question

这是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/

Answer 1

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

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

示例：

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

<强>更新：

要保留滚动条并禁用它们，请遵循以下解决方案：Just disable scroll not hide it?

此处示例：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%;
}

Answer 2

如果您根本不想滚动正文容器，可以将overflow:hidden属性添加到正文，或者可以使用jQuery冻结正文容器滚动条，就像在Facebook上完成一样。

CSS溢出的滚动问题：滚动HTML

2 个答案: