I also checked a lot of information, and did not take the way of prohibiting the scroll bar.
Because the inner box slides to the bottom, it will start to slide the scroll bar of the outer box
The solution is otherwise the inner scroll bar scrolls to the bottom
Test compatible with ie8+ Google OK (other browsers are not tested)
<style type="text/css">
.main{
overflow: auto;
width: 400px;
height: 400px;
border: 1px solid #aaa;
}
.main p{
height: 15px;
}
</style>
<script src="jquery.min.js"></script>
<body>
<div id="main" class="main">
<p>sdfsfsdfs</p>
<p>sdfsfsdfs</p>
<p>sdfsfsdfs</p>
<p>sdfsfsdfs</p>
<p>sdfsfsdfs</p>
<p>sdfsfsdfs</p>
<p>sdfsfsdfs</p>
<p>sdfsfsdfs</p>
<p>sdfsfsdfs</p>
<p>sdfsfsdfs</p>
<p>sdfsfsdfs</p>
</div>
<p style="height:1000px;"></p>
</body>
<script type="text/javascript">
$(function () {
$('#main').hover(function(){
var height = document.getElementById('main').scrollHeight; //height of scrolling content
var boxHeight = $('#main').height(); //height of the scrolling box
$('#main').scroll(function(){
var _top = $('#main').scrollTop(); //The height of the sliding distance top
if(_top === (height - boxHeight)){ //ideally sliding to the bottom is equal to scrollHeight-boxHeight
$('#main').scrollTop(_top-1); //Change the scrollTop value and never slide to the bottom
}
})
},function(){
$('#main').off('scroll');
});
});
</script>
Pro test compatible with ie8
Since I checked a lot of information and couldn't find a solution, I decided to write it down