css隐藏滚动条,并解决在IOS滚动不流畅的问题

在移动端页面显示时,为了美观,我们一般会把overflow-x,overflow-y滚动条隐藏起来。

.element{
   overflow-x:scroll;
   overflow-y:auto;
}

温馨提示:一般在用到overflow-x,overflow-y的任意一个时,都建议把另外一个一起写上

隐藏滚动条一般主要是用到:

.element::-webkit-scrollbar {display:none}

使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性。所以一般不推荐使用。

解决滚动条在ios系统上不流畅的问题:


.element{
    overflow-x:scroll;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;//允许独立的滚动区域和触摸回弹
}

这样就可以啦。


展开阅读全文

没有更多推荐了,返回首页