Preface
Normally, when the inner scroll bar scrolls to both ends, the outer scroll bar will follow the scrolling; but sometimes we hope that the user can only scroll the current area, and The outer scroll bar (window) is not triggered. The outer scroll bar can be scrolled only after leaving the current area. Because the user may accidentally scroll too far, causing the current area to leave the visible area.
In jquery, the scroll event is scroll, and this event cannot prevent bubbling and default events. If we set to disable the scroll bar of the window, the strategy I adopt is: when the mouse enters the current area, the height of the scroll bar of the window is always the height before the mouse enters
The following code:
<style type="text/css">
.main{
overflow: auto;
width: 400px;
height: 400px;
border: 1px solid #aaa;
}
.main p{
height: 800px;
}
</style>
<body>
<div id="main" class="main">
<p></p>
</div>
<p style="height:1000px;"></p>
</body>
$(function () {
var scrollTop = -1; // 鼠标进入到区域后，则存储当前window滚动条的高度
$('#main').hover(function(){
scrollTop = $(window).scrollTop();
}, function(){
scrollTop = -1;
});
// 鼠标进入到区域后，则强制window滚动条的高度
$(window).scroll(function(){
scrollTop!==-1 && $(this).scrollTop(scrollTop);
})
})As you can see from the above code, I did not prevent the window scroll bar event, but reassigned the value every time the user scrolled.
Summary
The above is the entire content of this article. I hope the content of this article can bring some help to everyone's study or work. Of course, there may be better methods. Everyone is welcome to provide it, thank you!
For more articles related to using jquery to disable the scrolling of the outer scroll bar, please pay attention to the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
