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

时间:2020-09-24 21:40:47   收藏:0   阅读:61

网上大部分方案如下,即给出现滚动条的元素 ::-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;
}
评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!