---
# System prepended metadata

title: ios overflow 滾動優化

---

# ios overflow 滾動優化
在 overflow 滾動的元件加上：
```css
-webkit-overflow-scrolling: touch;
```
可以讓它具有邊緣回彈效果，並且在操作子元件的時候，不會被滾動干擾。

下圖中，table 只設定 `overflow-y: auto;`，在操作拉桿時，偏上或偏下移動都會變成表格內容的滾動：
![](https://media.giphy.com/media/cmxqWQz0gTZrJe9cab/giphy.gif)



在加上 `-webkit-overflow-scrolling: touch;` 之後，點選拉桿時，表格的 overflow 滑動會被鎖定：
![](https://media.giphy.com/media/g0QGySbCjwO9BnybYQ/giphy.gif)


參考資料：[深入研究-webkit-overflow-scrolling:touch及ios滚动](https://www.cnblogs.com/xiahj/p/8036419.html)