禁止外层滚动条的滚动非常常见，可以通过jQuery实现。以下是具体步骤：
首先，在HTML页面中需要有一个包含需要禁止滚动条的元素容器，例如：
<div class="container">
<div class="content">
<!-- 页面内容 -->
</div>
</div>
其中，container为外层容器，content为内层内容容器。
接下来，需要通过CSS设置外层容器的高度和溢出属性，使其固定高度，以及超出时隐藏内容并产生滚动条。示例代码如下：
.container {
height: 300px; /* 固定高度 */
overflow-y: auto; /* 产生纵向滚动条 */
}
最后，需要使用JavaScript禁止外层容器的滚动事件，使滚动条无法滚动。示例代码如下：
$('.container').on('mousewheel DOMMouseScroll', function(e) {
var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
if ($(this).height() < this.scrollHeight || delta > 0 && $(this).scrollTop() === 0 || delta < 0 && $(this).scrollTop() === this.scrollHeight - $(this).height()) {
e.preventDefault();
}
});
这段代码使用了on方法来绑定外层容器的滚动事件，其中mousewheel和DOMMouseScroll为不同浏览器的滚轮事件名称。当外层容器的高度小于其内部内容高度时，且滚动位置已经在顶部或底部时，禁止滚动事件的默认行为，即禁止滚动条滚动。
假设现在我们需要禁止整个页面的滚动条滚动，而只允许内部某个具体区域滚动，例如：
<!DOCTYPE html>
<html>
<head>
<title>禁止外层滚动条滚动</title>
<meta charset="utf-8">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.container {
height: 300px;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<!-- 此处是需要滚动的内容区域 -->
<p>这是第一段内容</p>
<p>这是第二段内容</p>
<p>这是第三段内容</p>
<p>这是第四段内容</p>
<p>这是第五段内容</p>
<p>这是第六段内容</p>
<p>这是第七段内容</p>
<p>这是第八段内容</p>
<p>这是第九段内容</p>
<p>这是第十段内容</p>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$('.container').on('mousewheel DOMMouseScroll', function(e) {
var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
if ($(this).height() < this.scrollHeight || delta > 0 && $(this).scrollTop() === 0 || delta < 0 && $(this).scrollTop() === this.scrollHeight - $(this).height()) {
e.preventDefault();
}
});
</script>
</body>
</html>
在这个例子中，我们给整个页面添加了一个滚动条，但只允许.container区域内的内容滚动，外层元素禁止滚动。
假设现在我们需要在网页中添加一个模态框，需要禁止背后内容区域的滚动条滚动，而只允许模态框内部的内容滚动，例如：
<!DOCTYPE html>
<html>
<head>
<title>禁止外层滚动条滚动 - 模态框示例</title>
<meta charset="utf-8">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
overflow-y: auto;
background-color: #fff;
z-index: 1000;
padding: 16px;
}
</style>
</head>
<body>
<div class="container">
<h1>禁止外层滚动条滚动 - 模态框示例</h1>
<p>背后可以滚动的内容区域</p>
<p>背后可以滚动的内容区域</p>
<p>背后可以滚动的内容区域</p>
<p>背后可以滚动的内容区域</p>
<p>背后可以滚动的内容区域</p>
<div class="modal-overlay">
<div class="modal">
<h2>模态框标题</h2>
<p>模态框内可以滚动的内容区域</p>
<p>模态框内可以滚动的内容区域</p>
<p>模态框内可以滚动的内容区域</p>
<p>模态框内可以滚动的内容区域</p>
<p>模态框内可以滚动的内容区域</p>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$('.modal-overlay').on('mousewheel DOMMouseScroll', function(e) {
var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
if ($(this).height() < this.scrollHeight || delta > 0 && $(this).scrollTop() === 0 || delta < 0 && $(this).scrollTop() === this.scrollHeight - $(this).height()) {
e.preventDefault();
}
});
</script>
</body>
</html>
在这个例子中，我们添加了一个位于页面正中间的模态框，并且禁止了背后内容区域的滚动条滚动，只允许模态框内部的内容滚动。
本文链接：http://task.lmcjl.com/news/15830.html