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%) は、スクロール効果を実現するためにスクロール ウィンドウの高さを上に移動することを意味します。

ステップ 4: 完全なコード

上記のステップが統合され、最終的な完全なコードは次のとおりです:

<div class="scroll-container">
  <p>这是需要滚动的内容……</p>
  <p>这也是需要滚动的内容……</p>
  <p>这还是需要滚动的内容……</p>
</div>

上記は、スクロール用のステップと完全なコードです。 CSS を使用して上下に移動できます。違いは次のとおりです。コンテナとスクロール ウィンドウのスタイルを変更することで要件を達成できます。

以上がCSSで上下スクロールを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。