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

値

例

注意と互換性

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:56 AM

-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以降対応

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7323

Java チュートリアル

1625

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、