JavaScript-如何在网页上鼠标滚动时，只使用页面内的滚动条？
如何在网页上某一个div内滚动滚动条时，禁止整个document的滚动。也就是说，让这个div的滚动条滚到了顶部或者底部的时候，document也不要跟着滚动，不知道能否实现？
但是，鼠标是可以拖动页面滚动条的。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
利用鼠标滚轮对网页内部无素滚动条触发滚动事件，当滚动条到达元素顶部或底部时不触发浏览器窗口的滚动事件。
通过调用以下函数实现：
function preventScroll(id){
var _this = document.getElementById(id);
if(navigator.userAgent.indexOf("Firefox")>0){
_this.addEventListener('DOMMouseScroll',function(e){
_this.scrollTop += e.detail > 0 ? 60 : -60;
e.preventDefault();
},false);
}else{
_this.onmousewheel = function(e){
e = e || window.event;
_this.scrollTop += e.wheelDelta > 0 ? -60 : 60;
return false;
};
}
return this;
}
用js代码解决如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<link href="" rel="stylesheet" type="text/css"/>
<style type="text/css">
body{height:1500px;}
.box{height:200px;width:200px;overflow:auto;margin:200px auto;border:1px solid blue;}
</style>
</head>
<body>
<ul class="box" id="list">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<script type="text/javascript">
preventScroll("list");
function preventScroll(id){
var _this = document.getElementById(id);
if(navigator.userAgent.indexOf("Firefox")>0){
_this.addEventListener('DOMMouseScroll',function(e){
_this.scrollTop += e.detail > 0 ? 60 : -60;
e.preventDefault();
},false);
}else{
_this.onmousewheel = function(e){
e = e || window.event;
_this.scrollTop += e.wheelDelta > 0 ? -60 : 60;
return false;
};
}
return this;
}
</script>
</body>
</html>
用jquery解决代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<link href="" rel="stylesheet" type="text/css"/>
<style type="text/css">
body{height:1500px;}
.box{height:200px;width:200px;overflow:auto;margin:200px auto;border:1px solid blue;}
</style>
</head>
<body>
<ul class="box">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".box").preventScroll();
})
$.fn.extend({
"preventScroll":function(){
var _this = this.get(0);
if($.browser.mozilla){
_this.addEventListener('DOMMouseScroll',function(e){
_this.scrollTop += e.detail > 0 ? 60 : -60;
e.preventDefault();
},false);
}else{
_this.onmousewheel = function(e){
e = e || window.event;
_this.scrollTop += e.wheelDelta > 0 ? -60 : 60;
return false;
};
}
return this;
}
});
</script>
</body>
</html>
希望能解决你的问题。