内层盒子滚动条滑动到底部会滑动外层滚动条解决方法

Posted Shmily`

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了内层盒子滚动条滑动到底部会滑动外层滚动条解决方法相关的知识,希望对你有一定的参考价值。

我也查了很多资料,没有采取禁止滚动条的方式。

因为内层盒子滑到最底部就会开始滑动外层盒子的滚动条

解决方案  不然内层滚动条滚动到最底部

测试  兼容ie8+ 谷歌OK(其它浏览器没有测试)

<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;    //滚动内容的高度
var boxHeight = $(‘#main‘).height();   //滚动盒子的高度
$(‘#main‘).scroll(function(){
var _top = $(‘#main‘).scrollTop();   //滑动距离top的高度
if(_top === (height - boxHeight)){   //理想情况下 滑动到最底部是等于scrollHeight-boxHeight的  
$(‘#main‘).scrollTop(_top-1);   //改变scrollTop值 永远滑不到最底部
}
})
},function(){
$(‘#main‘).off(‘scroll‘);
});
});

</script>
 
亲测兼容ie8  
由于我查了很多资料都没有找到解决方案 所以决定写下了

以上是关于内层盒子滚动条滑动到底部会滑动外层滚动条解决方法的主要内容,如果未能解决你的问题,请参考以下文章

cocosscrollview在某个时间内滚动到指定位置

js实现滚动条滑动到底部

jq怎么解决父盒子超过浏览器加遮罩层时还可以滑动滚动条

selenium+python关于页面滚动条滑动到底的问题总结

JS 原生JS 判断滚动条滑动到底部(兼容苹果safari)

“css中滑动背景如何让盒子不滑动”?