- 综合排序
- 最热优先
- 最新优先
- 来自专栏守候书阁
ios上-webkit-overflow-scrolling与position的bug
如上图，.fb-box是一个大div，包含着页面上的所有元素,包括所看到的那个弹窗.dialog-img，并且设置了height:100%;-webkit-overflow-scrolling:touch 定位需要，-webkit-overflow-scrolling:touch;也需要。 ?
66810发布于 2018-08-22 - 来自专栏李维亮的博客
网页在Safari快速滚动和回弹的原理： -webkit-overflow-scrolling : touch;的实现
要实现这个效果很简单，只需要加一行css代码即可： -webkit-overflow-scrolling : touch; 可用以下网页测试： <! overflow-y : auto; background-color : cyan; -webkit-overflow-scrolling 如果把-webkit-overflow-scrolling那行注释掉，就会发现滚动得很慢。 实际上，Safari真的用了原生控件来实现，对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。 从前端开发的角度讲，只需要知道CSS的属性-webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件，所以效率很高。
1.7K30发布于 2021-07-09 - 来自专栏大前端（横向跨端 & 纵向全栈）
移动端页面在IOS里滑动不顺畅解决办法
这时候可以使用-webkit-overflow-scrolling:touch这个属性，让滚动条产生滚动回弹的效果，就像ios原生的滚动条一样流畅 ? ? 简单说明一下： -webkit-overflow-scrolling ：控制元素在移动设备上是否使用滚动回弹效果。 auto：使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 在safari上，使用了-webkit-overflow-scrolling:touch之后，页面偶尔会卡住不动。 解决问题的方法： 第一步：将使用-webkit-overflow-scrolling的元素的定位取消或手动改成position:static; 第二步：将使用-webkit-overflow-scrolling
2.6K10发布于 2020-11-26 - 来自专栏技术指北
利用 cloudflare一分钟生成一个导航站
DOCTYPE html>
</script><code style="border-radius: 0px; -<em>webkit-overflow-scrolling</em> seller : ''}</span></code><code style="border-radius: 0px; -webkit-overflow-scrolling: touch; text-align encode=js&select=%23hitokoto" defer></script><code style="border-radius: 0px; -<em>webkit-overflow-scrolling</em>92000编辑于 2024-12-25 - 来自专栏岳泽以博客
记录：关于苹果端IOS系统webkit-overflow-scrolling-touch不显示元素的兼容性问题
项目中给某个带滚动条的元素添加了 overflow:scroll以及 -webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch ;MDN定义 -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 这个问题很早就存在，现在也一直存在，而且 Android 之所以不存在这个现象，是因为 Android 压根不支持 -webkit-overflow-scrolling: touch; 这个属性，而 ios 存在问题，恰恰是因为 ios 支持了这个属性，但是它处理的机制是： 如果一个元素同时存在 -webkit-overflow-scrolling: touch; 和 overflow:scroll属性， 解决办法：只需要在公共样式加入下面这行代码 *{ -webkit-overflow-scrolling: touch; } 但是这种方法，如果元素过多过杂的情况下，可能会出现一些其他兼容性问题，目前没有找到更好的解决办法
1.9K20编辑于 2023-03-30 - 来自专栏练小习的专栏
ios下滚动条默认显示
webkit-scrollbar-thumb以及::-webkit-scrollbar-track-piece的背景颜色情况下，如果不设置::-webkit-scrollbar宽度（高度），滚动条是不会出现的 2、-webkit-overflow-scrolling : touch;属性让ios默认不显示滚动条 -webkit-overflow-scrolling属性是定义是否使用回弹效果；默认值是auto;当-webkit-overflow-scrolling设置为 padding: 10px; margin: 20px; box-sizing: border-box; font-size: 12px; resize: none; -webkit-overflow-scrolling
6.2K60发布于 2017-12-29 - 来自专栏金融知识
自建 CA、签发证书与格式避坑指南
TXTAI代码解释bashCopycode[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling bashCopycode[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling bashCopycode[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling PEM(万能解法)`bashCopycode[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling
43510编辑于 2025-12-22 微信小程序隐藏滚动条多种方法教程
display: none; width: 0; height: 0; color: transparent; background: transparent;}/* 兼容性处理 */page { -webkit-overflow-scrolling scroll-view>平台适配方案方法四：多平台兼容处理考虑到不同平台的差异，建议添加兼容代码：/* 平台特定适配 */page, .scroll-container { /* iOS 平滑滚动 */ -webkit-overflow-scrolling display: none; width: 0; height: 0; color: transparent; background: transparent;}/* 页面基础样式 */page { -webkit-overflow-scrolling scroll-container { transform: translateZ(0); -webkit-transform: translateZ(0);}/* 优化滚动性能 */scroll-view { -webkit-overflow-scrolling
77210编辑于 2025-11-21- 来自专栏云原生布道专栏
【基础系列】CSS专题
带来的BUG http://www.tuicool.com/articles/U73Erq iOS8 Safari -webkit-overflow-scrolling: touch; issue http : touch导致Native滚动时出现黑色背景 http://www.jianshu.com/p/171b8b7761cb -webkit-overflow-scrolling: touch; breaks noredirect=1&lq=1 `-webkit-overflow-scrolling: touch` broken for initiallyoffscreen elements in iOS7 rq=1 iOS8 Safari -webkit-overflow-scrolling: touch; issue http://stackoverflow.com/questions/26738764 /ios8-safari-webkit-overflow-scrolling-touch-issue How we fixed the -webkit-overflow-scrolling: touch
77720编辑于 2023-10-16 第三方库兼容坑：某 UI 组件在移动端的适配问题及修复
排查过程 观察组件容器 CSS，定位是否使用 position: fixed 且 height: 100vh 检查祖先元素是否应用 transform 影响固定定位在 iOS 的表现 查看是否启用 -webkit-overflow-scrolling flex: 0 0 auto; padding: 12px 16px; } .modal-content { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling ，避免受祖先 transform 影响 通过门户挂载或独立容器确保层级关系与定位稳定 滚动锁定 弹层打开时对 body 应用 overflow: hidden 或使用稳定的滚动锁定库 弹层内部开启 -webkit-overflow-scrolling
23810编辑于 2025-12-15- 来自专栏大前端（横向跨端 & 纵向全栈）
H5页面前端开发常见的兼容性问题解决方法
*{ -webkit-overflow-scrolling: touch; } 注意：加了这个属性以后，如果页面中有设置了绝对定位的节点，那么该节点的显示会错乱。 -webkit-overflow-scrolling是什么？MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果。
3.6K11编辑于 2022-05-06 - 来自专栏程序员成长指北
微信H5页面兼容性解决方案
对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。 【有待考证】 解决办法：只需要在公共样式加入下面这行代码 *{ -webkit-overflow-scrolling: touch;} But，这个属性是有bug的，比如如果你的页面中有设置了绝对定位的节点 拓展知识： -webkit-overflow-scrolling:touch是什么？ MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
4.2K43发布于 2019-09-24 - 来自专栏娱乐心理测试
vue 界面在苹果手机上滑动点击事件等卡顿解决方案
template>
页面内容</template> 在对应的组件的最外层div上加上这样的样式： .content{ -webkit-overflow-scrolling : touch; } -webkit-overflow-scrolling: touch;这句代码最好可在公共的样式中添加，防止很多页面都需要写的麻烦。2K30发布于 2018-12-18 - 来自专栏前端自习课
【H5】344- 微信 H5 页面兼容性解决方案
对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。 【有待考证】 解决办法：只需要在公共样式加入下面这行代码 *{ -webkit-overflow-scrolling: touch; } But，这个属性是有bug的，比如如果你的页面中有设置了绝对定位的节点 拓展知识： -webkit-overflow-scrolling:touch是什么？ MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
3.4K30发布于 2019-09-09 - 来自专栏code秘密花园
微信 H5 页面兼容性解决方案
对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。 【有待考证】 解决办法：只需要在公共样式加入下面这行代码 *{ -webkit-overflow-scrolling: touch; } But，这个属性是有bug的，比如如果你的页面中有设置了绝对定位的节点 拓展知识： -webkit-overflow-scrolling:touch是什么？ MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
4.1K30发布于 2019-10-28 - 来自专栏前端小叙
移动端盒子元素实现左右可滑动且竖向页面可滑动
flex-start; touch-action: pan-x pan-y; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling width: 100%; height: 400px; /* 可自定义高度 */ overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling
33810编辑于 2025-09-10 - 来自专栏个人路线
Taro 开发鸿蒙版每日资讯应用实战指南
100% 继承父容器 .index 高度，200px 为顶部标题、日期等固定元素的高度），适配不同屏幕尺寸 滚动条优化：添加 overflow-y: auto 实现内容超出时自动显示滚动条，同时通过 -webkit-overflow-scrolling 优化移动端滚动流畅度 .news-list { height: calc(100% - 200px); /* 动态高度 */ overflow-y: auto; /* 内容溢出时显示滚动条 */ -webkit-overflow-scrolling 滚动不流畅：尝试添加 -webkit-overflow-scrolling: touch 优化移动端滚动体验。
51410编辑于 2025-05-27 - 来自专栏前端开发
React虚拟列表在移动端的优化方法有哪些？
使用 { passive: true } 优化滚动事件监听，避免触摸滑动时的页面阻塞防抖处理滚动事件，减少快速滑动时的计算频率滚动过程中简化渲染内容（如隐藏图片、复杂组件），静止后再显示完整内容启用 -webkit-overflow-scrolling itemCount={items.length} itemSize={60} overscanCount={3} // 减少缓冲区（移动端屏幕小） style={{ '-webkit-overflow-scrolling
32510编辑于 2025-08-14 - 来自专栏grain先森
移动端的那些坑
当使用-webkit-overflow-scrolling: touch;时，同时使用::-webkit-scrollbar伪类的display:none隐藏滚动条在iOS 11+出现失效的情况，需要使用如下方案解决 下你希望滚动的部分也无法滚动了，因此对于希望滚动的部分，通过e.stopPropagation保留原有滚动效果，并针对回弹动画的交互，建议使用如下代码声明一个可滚动区域： /* 以下属性添加到滚动容器上 */ -webkit-overflow-scrolling
2.2K30发布于 2019-03-29 - 来自专栏互联网软件技术
OOCSS(面向对象的CSS)总结
webkit-scrollbar-track { 15 background-color: transparent; 16 } 17 18 /* 全局 */ 19 /** 20 * -webkit-overflow-scrolling : touch; //有回弹效果 21 * -webkit-overflow-scrolling: auto; //滑到哪停到哪 22 **/ 23 *{padding: 0;margin : 0;font-style: normal;outline: none;box-sizing: border-box;-webkit-overflow-scrolling: touch;-webkit-tap-highlight-color
67110发布于 2019-03-06
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号