Home >Web Front-end >JS Tutorial >Use jquery to disable scrolling of the outer scroll bar

Use jquery to disable scrolling of the outer scroll bar

高洛峰Original: 2017-01-11 10:05:131768browse

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滚动条的高度
 $(&#39;#main&#39;).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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery anchor jump scroll bar smooth scrolling code in one sentenceNext article：jQuery anchor jump scroll bar smooth scrolling code in one sentence

See more

Use jquery to disable scrolling of the outer scroll bar

Related articles