解决页面使用overflow: scroll，overflow-y:hidden在iOS上滑动卡顿的问题

在 iOS 上使用 `overflow: scroll` 或 `overflow-y:hidden` 时，可能会导致页面滑动卡顿的问题。这是因为 iOS 上的滚动机制与其他平台不同，iOS 会将滚动事件转换为 touch 事件，而 touch 事件的处理会比 mouse 事件复杂，因此可能会导致页面卡顿。

为了解决这个问题，可以尝试以下几种方法：

1. 使用 `-webkit-overflow-scrolling: touch` 属性来启用 iOS 上的滚动优化。这个属性会启用硬件加速和平滑滚动，可以提高页面滑动的性能。

.container {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

2. 减少页面中的滚动元素数量。滚动元素越多，处理滚动事件的复杂度就越高，可能会导致页面卡顿。

3. 优化页面中的滚动元素。例如，使用 `transform` 属性来实现滚动效果，可以提高性能。

4. 使用第三方库来实现滚动效果，例如 iScroll、BetterScroll 等。这些库会使用特定的滚动机制来优化页面滑动的性能。

希望以上方法能够帮助你解决页面滑动卡顿的问题。

相关问题

html, body { height: 100%; overflow-y: scroll; body { -webkit-overflow-scrolling: touch; overscroll-behavior: none; } }

这段代码的问题在于，您在`html`和`body`标签中设置了`overflow-y: scroll`，这会导致整个页面都可以滚动，而不是仅限于内容超出部分。

此外，您设置了`-webkit-overflow-scrolling: touch`，这是一个用于iOS设备的CSS属性，用于实现平滑滚动效果。但是，这个属性应该写在`body`标签中而不是在`body`标签内部的样式中。

最后，`overscroll-behavior: none`用于阻止iOS设备的弹性滚动效果，但是这个属性只在iOS 10及以上版本中生效，如果需要兼容之前的版本，可以考虑使用JavaScript代码实现。

因此，您可以尝试修改为以下代码：

body {
  height: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.content {
  height: 100%;
  overflow-y: scroll;
  overscroll-behavior: none;
}

这样，您可以在`body`中隐藏滚动条，并使用`.content`来实现内容的滚动，并在其中使用`overscroll-behavior: none`来阻止iOS设备的弹性滚动效果。

overflow: scroll;在ipad air2不生效

可能是因为iPad Air 2使用的是Safari浏览器，而Safari浏览器在iOS中对于overflow:scroll;不支持惯性滚动。你可以尝试使用-webkit-overflow-scrolling: touch;来启用惯性滚动，或者使用一些第三方的JS插件来实现惯性滚动。另外，也可以尝试使用更适合移动端的滚动方式，例如使用滑动手势来实现滚动。