スクロール-snapでスクロールツールを使用する
1256 ワード
スクロール-snapを適用したページを作成しています.volume-snapを適用するには、コンテナとその内部にスクロールする要素が含まれている必要があります.また、コンテナにはスクロール可能なオーバーフローアトリビュートが必要です.
スクロール-snapの応用はあまり困難ではないので,容易に行える.しかし問題はscrolltoを用いたスクロール制御が機能しないことである.scrollToで次の項目をキャプチャしたいのですが、スクロールは動いていません.スクロール-snapが無効になっている場合、scrollToは正常に動作しますが、スクロール-snapを開くと動作しません.
なぜなら、スクロールされたオブジェクトです.現在までscrollToでブラウザウィンドウのスクロールを真剣に制御してみますが、考えてみればブラウザの高さは100 vhであり、スクロールではありません.
これはsnapコンテナのオーバーフローによるスクロールがブラウザのスクロールと誤って認識されたためである.
問題を解決するために、スクロールするターゲットをウィンドウではなくsnapコンテナとして指定し、正常に動作します.
スクロール-snapの応用はあまり困難ではないので,容易に行える.しかし問題はscrolltoを用いたスクロール制御が機能しないことである.scrollToで次の項目をキャプチャしたいのですが、スクロールは動いていません.スクロール-snapが無効になっている場合、scrollToは正常に動作しますが、スクロール-snapを開くと動作しません.
なぜなら、スクロールされたオブジェクトです.現在までscrollToでブラウザウィンドウのスクロールを真剣に制御してみますが、考えてみればブラウザの高さは100 vhであり、スクロールではありません.
これはsnapコンテナのオーバーフローによるスクロールがブラウザのスクロールと誤って認識されたためである.
問題を解決するために、スクロールするターゲットをウィンドウではなくsnapコンテナとして指定し、正常に動作します.
document.querySelector(".container").scrollTo({ top: 0, behavior: "smooth" })
Reference
この問題について(スクロール-snapでスクロールツールを使用する), 我々は、より多くの情報をここで見つけました https://velog.io/@drrobot409/scroll-snap에서-scrollTo-사용하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol