素材牛VIP会员
移动端overflow: auto不现实滚动条、怎么破?
 tu***23  分类:JavaScript  人气:905  回帖:3  发布于6年前 收藏

HTML:

<div id="demo">
    // 一大堆文字
</div>

CSS:

#demo {
    width: 500px;
    height: 300px;
    // 无效
    overflow: auto;
    // 无效
    overflow-y: auto;
    // 无效
    overflow: scroll;
    // 无效
    overflow-y: scroll;
}

我就是想要浏览器自带的滚动条,苹果手机弄死不现实滚动条,但内容还是可以滚蛋···就是没有滚动条,而且滑动一点儿都不流畅。 安卓手机是正常现实的

求大神指教,是我代码写错了还是怎样?备注:我要浏览器自带的滚动条

讨论这个帖子(3)垃圾回帖将一律封号处理……

Lv5 码农
ga***et 移动开发工程师 6年前#1

不太清楚。用iscrollbetter-scrollswiper 轻松可以实现。而且还带回弹效果

Lv5 码农
陌***3 PHP开发工程师 6年前#2

写法没有错,一般用 overflow: auto;这个就可以了,不流畅的话可能是这个问题,加个-webkit-overflow-scrolling: touch;,参考:https://www.jianshu.com/p/1f4...

Lv6 码匠
你***饭 学生 6年前#3

使用 -webkit-overflow-scrolling: touch; 可以解决一切 IOS 滑动不顺畅的情况。
但是 -webkit-overflow-scrolling: touch; 在 IOS下 bug特别多,需要做很多处理,比如说,如果设置 -webkit-overflow-scrolling: touch; 的元素有设置 position 样式,它的父子元素或者是兄弟元素也设置了 position 样式,就会触发 bug。 还有一些 bug 是它会触发浏览器自带的滚动行为,例如微信下拉的黑边之类的。
使用的时候还是需要多多注意的。

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取