上方向へのスクロールを防ぎながら、Div を下までスクロールしたままにするにはどうすればよいですか?

ユーザーが上にスクロールしない限り、Div を一番下までスクロールしたままにする

質問:

方法ユーザーが明示的に上にスクロールして再び下に戻る場合を除き、下までスクロールされたままになる div を作成できますか?

CSS を使用した回答:

この問題を解決する鍵は、CSS の flex-direction: column-reverse プロパティを活用することです。このプロパティを div のコンテナに適用すると、基本的にコンテンツの流れを逆にして、下部を上部として扱うことができます。ほとんどのブラウザがフレックスボックスをサポートしているため、このトリックは機能します。

この効果を実現するための実際の CSS の例は次のとおりです:

<code class="css">.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}</code>

この CSS を配置すると、次の HTML は自動的にスクロールする div を作成します。最後へ:

<code class="html"><div class="container">
  <div>Bottom</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Top</div>
</div></code>

注: この CSS アプローチでは、HTML マークアップの順序が逆になり、最後の項目が最初に表示されます。 div にコンテンツを動的に追加するときは、この点に留意してください。

以上が上方向へのスクロールを防ぎながら、Div を下までスクロールしたままにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。