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

时间:2012-08-08 14:13:27

标签: javascript css scroll overflow

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

2 个答案:

答案 0 :(得分:3)

你可以使用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%;
}

答案 1 :(得分:0)

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