特殊情况下修改或者隐藏滚动条样式

当移动app左右两侧都出现滚动条时，我们可以将左侧滚动条进行隐藏。如图所示

只需要在左侧超出的盒子上加上如下代码

左侧盒子元素或者类名::-webkit-scrollbar {
      display: none;
      }

在控制台输入以下，能找到显出出现滚动条的元素

      function findscroller(element){
        element.onscroll=function () {
            console.log(element)
        }
        Array.from(element.children).forEach(findscroller)
  }
  findscroller(document.body)

通过css样式还能修改滚动条的样式,如图所示

滚动条背景颜色
::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #f5f5f5;
      }
滚动条的宽高
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #f5f5f5;
}
滚动条自身的颜色
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
}

禁止左滑右滑

created () {
    document.body.style.overscrollBehaviorX = 'none'
},