这是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/
答案 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上完成一样。