CSS はモバイル デバイスでのスクロール リバウンド効果を実装_html/css_WEB-ITnose

-webkit-overflow-scrolling 属性は、モバイル デバイス上でスクロール リバウンド効果を持つ要素を制御します。

Saferi この属性が存在する Web ページの場合、UIScrollView が作成されますレンダリング モジュールに使用される子レイヤーを提供する

参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling

値

auto は通常のスクロールを使用し、指が画面から離れるとスクロールを停止します

touch はリバウンド効果のあるスクロールを使用します。スクロールの速度と持続時間は次のとおりです。比例

例

HTML

<div class="wrapper">  <div class="scroller">    <!-- content -->  </div></div>

CSS

.wrapper {  overflow: auto;  -webkit-overflow-scrolling: touch;}

ただし、IOS Saferi では迷惑な「ラバーバンド効果」がある (オーバースクロール)

Zhihu の詳細

https://www.zhihu.com/question/22256539

注意と互換性

ハードウェア アクセラレーションによるシステム レベルの制御なので、非常に効率的ですが、より多くのメモリを消費します。非常に大きな領域のオーバーフローが生成される場合にのみ適用するのが最善です。

iOS Safari 5.0 / Android 4.0以降対応