解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题
时间: 2024-03-12 19:46:43 浏览: 354
解决页面使用overflow: scroll在iOS上滑动卡顿的问题1
在 iOS 上,使用 `overflow: scroll` 或 `overflow-y:hidden` 时会出现滑动卡顿的问题,这是因为 iOS 会将页面内容放在一个滚动层中,而滚动层的滚动速度比页面的滚动速度慢,导致滑动卡顿。为了解决这个问题,可以尝试以下方法:
1. 使用 `-webkit-overflow-scrolling: touch` 属性,启用 iOS 的滚动优化功能,可以提高滚动的流畅度。
```
div {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
```
2. 禁用页面的默认滚动事件,使用自定义的滚动事件来实现页面的滚动,可以提高滑动的流畅度。
```
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });
```
以上两种方法都可以有效解决在 iOS 上使用 `overflow: scroll` 或 `overflow-y:hidden` 时滑动卡顿的问题。
阅读全文