使用-webkit-overflow-scrolling: touch;使iPhone6p隐藏滚动条失效

Question

使用

-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的滚动条；
请问各位大佬有什么解决方法吗？？？？？

Answer 1

参考GPT和自己的思路：

对于使用-webkit-overflow-scrolling: touch;，导致iPhone 6 Plus上不能隐藏滚动条的问题，可以尝试以下几种方法解决：

1. 使用CSS样式

.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; /*隐藏滚动条*/
}

1. 使用JavaScript（需要引入iscroll.js文件）

<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>

以上两种方法都测试正常，可以根据自己的需求选择使用。