去除scroll-view滚动条

414 阅读1分钟
App.vue 
::-webkit-scrollbar { 
display: none; 
width: 0 !important; 
height: 0 !important; 
-webkit-appearance: none; 
background: transparent; 
}
iOS 13 以下的系统,当滚动区域设置了
-webkit-overflow-scrolling: touch;时(必须设置,否者几乎无法滚动),
::-webkit-scrollbar 相关属性会失效,iOS 13 已经修复了此Bug



  // .right_box::-webkit-scrollbar {
  //   display: none;
  //   width: 0 !important;
  //   height: 0 !important;
  //   -webkit-appearance: none;
  //   background: transparent;
  // }

  // .right_box::-webkit-scrollbar {
  //   /*滚动条整体样式*/
  //   width: 10px;
  //   /*高宽分别对应横竖滚动条的尺寸*/
  //   height: 1px;
  // }
  // .right_box::-webkit-scrollbar-thumb {
  //   /*滚动条里面小方块*/
  //   border-radius: 10px;
  //   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  //   background: #ededed;
  // }
  // .right_box::-webkit-scrollbar-track {
  //   /*滚动条里面轨道  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
  //   border-radius: 10px;
  //   background: #fff;
  // }

  .right_box::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: #f5f5f5;
  }
  .right_box::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #f5f5f5;
  }
  /*定义滑块 内阴影+圆角*/
  .right_box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #ccc;
  }