これはスクロールする必要があるコンテンツです...
"/>これはスクロールする必要があるコンテンツです...
">ホームページ > 記事 > ウェブフロントエンド > CSSで上下スクロールを実装する方法
上下スクロールを実現するCSS
Webデザインと開発では、テキストの上下スクロール効果を実現することが一般的な要件です。以下に、CSS ベースの上下スクロールを実現する方法を紹介します。
ステップ 1: コンテナを定義する
HTML では、まず、スクロールする必要があるコンテンツを含むコンテナを定義する必要があります。 div をコンテナまたは他の HTML 要素として使用できます。
コード例:
<div class="scroll-container"> <p>这是需要滚动的内容……</p> <p>这也是需要滚动的内容……</p> <p>这还是需要滚动的内容……</p> </div>
ステップ 2: スタイルの設定
CSS を使用して、幅、高さ、境界線などのコンテナの基本スタイルを設定します。同時に、overflow: hidden
属性を使用して、コンテナの範囲外のコンテンツを非表示にし、コンテンツがコンテナ内で自由にスクロールできるようにする必要があります。
コード例:
.scroll-container { width: 400px; height: 200px; border: 1px solid #ccc; overflow: hidden; }
ステップ 3: スクロール効果の実装
コンテナ内で、スクロール コンテンツを表示するために要素をスクロール "ウィンドウ" として定義する必要があります。 。位置決めを使用して、このスクロール ウィンドウをコンテナー内に配置し、その初期位置を設定できます。
スクロール効果を実現するには、CSS の animation
プロパティを使用してアニメーションを定義する必要があります。アニメーションでは、スクロール ウィンドウの位置を制御したり、上下に移動したり、スクロール速度を設定したりできます。
コード例:
.scroll-container { position: relative; } .scroll-container p { position: absolute; top: 0; left: 0; width: 100%; animation: scroll 10s linear infinite; } @keyframes scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
上の例では、スクロール ウィンドウを scroll-container
要素内の子要素 p
として定義します。それを scroll-container
コンテナの左上隅に配置します。次に、position:Absolute
を使用してドキュメント フローから削除し、top: 0
と left: 0
を使用してコンテナーの最上部に配置します。 。
animation
属性では、アニメーション名として scroll
を使用し、その期間を 10 秒に設定し、時間関数を linear## に設定します。 #、等速運動を表します。
infinite は、アニメーションが無期限に継続することを意味します。次に、
@keyframesscroll でアニメーションの特定のプロセスを定義します。ここで、
transform:translateY(-100%) は、スクロール効果を実現するためにスクロール ウィンドウの高さを上に移動することを意味します。
<div class="scroll-container"> <p>这是需要滚动的内容……</p> <p>这也是需要滚动的内容……</p> <p>这还是需要滚动的内容……</p> </div>上記は、スクロール用のステップと完全なコードです。 CSS を使用して上下に移動できます。違いは次のとおりです。コンテナとスクロール ウィンドウのスタイルを変更することで要件を達成できます。
以上がCSSで上下スクロールを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。