CSS3 で webkit-overflow-scolling を使用した経験を共有してください-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3 で webkit-overflow-scolling を使用した経験を共有してください

Sep 19, 2018 pm 04:16 PM

css3

スクロールバーはページレイアウトでもよく使用されます。この記事では、友人が落とし穴に足を踏み入れないようにするために -webkit-overflow-scolling を使用した私の経験を紹介します。見てください。

iOS の Safari ブラウザとアプリカーネルブラウザでは、h5 ページのコンテンツが画面の高さを超え、ジェスチャが離れるとすぐに指が画面をスライドすることは誰もが知っています。画面に戻ると、スクロールはすぐに終了します。このとき、 -webkit-overflow-scrolling=touch を設定することでページをスムーズにスクロールさせることができますが、これを設定すると多くの問題も発生します。

1. 本文のみの -webkit-overflow-scrolling touch の設定は無効です。有効にするには、HTML と本文の両方に同時に設定する必要があります。

コードは次のとおりです。

html,body{
    height: 100%;
    overflow: auto;
   -webkit-overflow-scrolling: touch;
}

ログイン後にコピー

2. 親コンテナの設定 - webkit-overflow-scrolling=touch の後、固定の子要素はサブコンテナに表示できなくなります。 -webkit-overflow-scrolling=touch を設定すると、画面をスライドすると固定属性が無効になり、画面と一緒にスクロールするため、この要素はスクロールが停止したときにのみページに固定されます。明らかに、これは私たちが望む結果ではありません。

ここでの私の解決策は、body 要素に -webkit-overflow-scrolling を設定せず、スクロールが必要な場所に別の div コンテナを追加して設定し、修正する必要があるすべてのコンテナを直接配置することです。要素内の本体。

3. div のみに -webkit-overflow-scrolling 属性を設定することは無効であることがわかりました。最初に親コンテナ div1 を高さのあるコンテナに設定してから、 -webkit-overflow-scrolling 属性を設定するための具体的なコードは次のとおりです。

&lt;style&gt;.div-p{ width: 100%; height: 500px;/*这是测试值，具体针对项目需求设置，不要超出子容器内容高度*/overflow: hidden;/*设不设定这个值对-webkit-overflow-scrolling没有影响*/}
.div-c{ width: 100%; height: 2000px; overflow: auto;/*测试发现一定要设定这个值才起作用*/ -webkit-overflow-scrolling: touch;}&lt;/style&gt;
&lt;div class=&quot;div-p&quot;&gt;
&lt;div class=&quot;div-c&quot;&gt;我要滚动啊，，在ios要顺畅啊&lt;/div&gt;
&lt;/div&gt;

ログイン後にコピー

テストを繰り返した結果、次の設定でも -webkit-overflow-scrolling を効果的にトリガーできることがわかりました。具体的なコードは次のとおりです:

&lt;style&gt;
.content-box{
  height: 500px;/*经过测试后发现只要设定的这个高度小于屏幕高度，-webkit-overflow-scrolling属性也能有效触发*/
  border: solid 1px green;
  overflow: auto;
  -webkit-overflow-scrolling: touch;}
&lt;/style&gt;
&lt;body&gt;
&lt;div class=&quot;content-box&quot;&gt;哎呀我是要滚动的啊&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
有效果的哦。。。
&lt;/div&gt;
&lt;/body&gt;

ログイン後にコピー

もちろん、上記のバージョンでは、画面と同じ高さを実現するために HTML レンダリングの最後に高さを変更する必要があります。後で、解決策が見つかりました。具体的なコードは次のとおりです。

&lt;style&gt;
.ios-scroll-father{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10rem ;
  height: 100%;}
.ios-scroll-child{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10rem ;
  overflow: auto;}
  -webkit-overflow-scrolling touch
&lt;/style&gt;
&lt;div class=&quot;ios-scroll-father&quot;&gt;
&lt;div class=&quot;ios-scroll-child&quot;&gt;
我要完美解决ios的顺畅滑动问题啊，，，来试试咯。演示，请自己添加代码到超出屏幕内容哦~
&lt;/div&gt;
&lt;/div&gt;

ログイン後にコピー

ここで、-webkit-overflow-scrolling 属性を設定する場合は、高さを設定しないか、高さを設定しないでください。高さのパディングは画面の高さを超えてはなりません。そうしないと、上または下にスクロールするときに一部が切り取られ、表示するにはスワイプする必要があることがわかります。。。これは落とし穴で、誤って高さを 100% に設定してパディングを行った後にこの現象を発見しました。その後、徹底的に検索しても問題が見つからなかったので、コードを削除してゆっくりとトラブルシューティングするしかありませんでした。

4. もちろん、これらの問題だけであれば、非常に簡単に解決できますが、ある日リストを作成し、スクロールページングエフェクトが必要になったときに、スクロールイベントを聞きました。スクロールバーのscrollTopが時々更新されず、ページのスクロールが停止するまでscrollTopの値を取得できないことがわかります。

5. ページのスクロール中にトランジションアニメーションが実行されないのは大きな落とし穴です。解決策がある場合は、メッセージを残してお知らせください。。。

上記はプロジェクトの開発中に遭遇したものであり、見つかった情報に基づいてテストを繰り返した結果得られた結論です。何か間違っている場合は、ご指摘ください。

以上がCSS3 で webkit-overflow-scolling を使用した経験を共有してくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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