いくつかの画像の CSS を書いています。基本的に達成したいのは、左から右に移動する画像があり、右端に到達したら再び左に表示されるなどです。これを実現するには次のコードを使用します。
リーリー リーリー
これはモバイル CSS ではなくデスクトップで機能します。画像が右に到達すると再び左から出てきますが、画像コンテナーの幅は 100vw で、画像は先頭にありますが、ページにスクロールが追加されます。画像が右端に到達すると、コンテナの幅によりスクロールが発生し、ページ上の他の絶対要素に影響を及ぼします。何らかの方法でそのスクロールを無効にするか、別の方法を使用して同じ効果を実現できますか?私に影響を与える他の絶対的な要素についても同様です。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
あなたが直面している問題は、アニメーション化された要素がビューポートの外に移動し、ページがスクロールすることが原因です。これを防ぐ 1 つの方法は、親コンテナーのオーバーフローを非表示にすることです。ただし、これがページ上の他の絶対要素に影響を与えると述べたので、別のアプローチとして、左側または右側のプロパティを変更する代わりに CSS 変換プロパティを使用することも考えられます。
リーリーslideAnimation キーフレームは、translateX を使用して画像を左から右に移動します。画像は画面 (-100%) から始まり、画面の右側 (100%) に移動します。オーバーフロー: .row-1 クラスの非表示により、アニメーションによる水平スクロールが防止されます。
これにより、不要なスクロールを発生させることなく、必要な効果が得られます