使用
-webkit-overflow-scrolling: touch;
会让苹果手机滑动更顺畅,但是苹果6p隐藏不了滚动条。
.suiyi {
width: 100%;
margin: 0 auto 0 auto;
background-color: #fff;
border-radius: 0 0 5px 5px;
padding: 14px 0;
height: calc(100% - 104px);
overflow: hidden;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.suiyi::-webkit-scrollbar {
display: none;
}
我的解决方法很土:在做个固定在右边的div,遮住iPhone6p的滚动条;
请问各位大佬有什么解决方法吗?????
参考GPT和自己的思路:
对于使用-webkit-overflow-scrolling: touch;,导致iPhone 6 Plus上不能隐藏滚动条的问题,可以尝试以下几种方法解决:
.suiyi{
-webkit-overflow-scrolling:touch!important; /*添加!important强制覆盖*/
overflow-y: scroll; /*滚动条显示,需注意的是此时iOS13+上仍然无法隐藏*/
scrollbar-width: none; /*Firefox*/
-ms-overflow-style: none; /*IE11*/
}
.suiyi::-webkit-scrollbar {
display: none; /*隐藏滚动条*/
}
<div id="wrapper">
<div id="scroller">
<!--此处为需要滚动的内容-->
</div>
</div>
<script src="iscroll.js"></script>
<script>
var myScroll = new IScroll('#wrapper', {
scrollbars:'custom',
interactiveScrollbars:true,
shrinkScrollbars:'scale',
fadeScrollbars:true,
click:true,
});
</script>
以上两种方法都测试正常,可以根据自己的需求选择使用。