如何解决移动端页面滚动不顺滑的问题_通过CSS设置-webkit-overflow-scrolling: touch属性-css教程-PHP中文网

-webkit-overflow-scrolling: touch 有时无效，是因为它仅在满足“明确高度、非static定位、内容真实溢出”三前提时生效；常见失效原因包括父容器定位异常、动态撑高未重绘、内容未真正溢出、与transform/passive touchmove冲突或滚动上下文被销毁。

如何解决移动端页面滚动不顺滑的问题_通过css设置-webkit-overflow-scrolling: touch属性

为什么 -webkit-overflow-scrolling: touch 有时没效果

加了 -webkit-overflow-scrolling: touch 却还是卡顿，大概率不是属性写错了，而是它被其他样式“抵消”了。这个属性只对具有滚动能力的容器生效，而 iOS Safari 对触发条件很敏感：必须同时满足「有明确高度」「非 static 定位」「内容真实溢出」三个前提。常见失效场景包括：

父容器用了 position: fixed 或 absolute，导致子元素计算高度异常
滚动区域高度靠 JS 动态撑开（比如用 innerHTML 插入后才设高），浏览器来不及重绘滚动上下文
容器设置了 overflow: scroll 但内容实际没超出，iOS 不会启用 touch 滚动回弹
外层包裹了 transform、will-change 等触发新层叠上下文的样式，间接禁用了原生滚动加速

必须配合的 CSS 组合写法

单独一行 -webkit-overflow-scrolling: touch 几乎总是不够。要让它稳定工作，得配一套最小可行样式：

滚动容器必须有明确的 height 或 max-height（不能是 min-height 或靠内容撑开）
移除或显式重置定位：position: static（哪怕原本没设 position，也建议加上）
子内容区需略高于容器，常用 height: calc(100% + 1px) 或 height: 101%，确保滚动判定成立
避免在该容器上使用 transform、filter、opacity 等触发合成层但干扰滚动行为的属性

示例：

MoltOverflow

Moltbots问答社区 - 提问编程问题，分享解决方案

下载

.scroll-container {
  height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: static;
}
.scroll-container > .content {
  height: calc(100% + 1px);
}