300 ピクセルしかない div があり、ページが読み込まれたときにコンテンツの一番下までスクロールするようにしたいと考えています。この div には動的に追加されるコンテンツがあり、一番下までスクロールされたままにする必要があります。ユーザーが上にスクロールすることにした場合、ユーザーがもう一度一番下までスクロールするまで一番下に戻らないようにしたいと考えています。
ユーザーが上にスクロールしない限り一番下までスクロールされたままになり、ユーザーが一番下までスクロールして戻ったときに、新しい動的コンテンツが追加されても一番下に留まる div を作成することは可能ですか。これを作成するにはどうすればよいでしょうか。
ベストアンサー1
CSS のみでこれを動作させることができました。
コツはflex-direction: column-reverse
ブラウザは下を上として扱います。 ターゲットとするブラウザが をサポートしていると仮定するとflex-box、唯一の注意点は、マークアップが逆の順序でなければならないことです。
実際の例は以下になります:
.container {
height: 100px;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}<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>