移动端-纯css隐藏滚动条解决方案

标签：解决方案   over   vco   htm   overflow   网上   pre   lin   隐藏   

网上大部分方案如下，即给出现滚动条的元素 ::-webkit-scrollbar 添加 display: none;

html,body {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

body::-webkit-scrollbar {
  display: none;  // 重点
}

但这个方法出现了问题，ios上的滑动效果很不流畅，不利于用户体验，Android上是ok的；
此时可以加上这样一句css代码（-webkit-overflow-scrolling: touch;），如下：

.container{
  //解决ios滑动不流畅
  -webkit-overflow-scrolling: touch;
}

因为我没有采用上边的方案，所以并不确定是否奏效，仅作此记录。

垂直方向滚动条

.navCon::-webkit-scrollbar {
  width: 0;
}

水平方向滚动条

.navCon::-webkit-scrollbar {
  height: 0;
}

移动端-纯css隐藏滚动条解决方案

标签：解决方案   over   vco   htm   overflow   网上   pre   lin   隐藏   

原文地址：https://www.cnblogs.com/ZerlinM/p/13722413.html