[解決済み] ユーザーが上にスクロールしない限り、overflow div は下にスクロールされたままになる
2022-03-17 03:05:16
質問
300ピクセルの大きさのdivがあるのですが、ページ読み込み時にコンテンツの一番下までスクロールさせたいのです。この div には動的にコンテンツが追加されるので、ずっと下にスクロールさせる必要があります。ユーザーが上にスクロールした場合、再び下にスクロールするまで、一番下にジャンプしないようにします。
ユーザーが上にスクロールしない限り、一番下にスクロールしたままの div を作成し、ユーザーが下にスクロールして戻ってきたときに、新しい動的コンテンツが追加されても一番下にいる必要があります。どのように作成すればよいでしょうか。
どのように解決するのですか?
これは役に立つかもしれません。
var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;
[EDIT]、コメントに合わせて...
function updateScroll(){
var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;
}
コンテンツが追加されるたびに、関数 updateScroll() を呼び出すか、タイマーをセットします。
//once a second
setInterval(updateScroll,1000);
ユーザが移動しなかった場合のみ更新したい場合。
var scrolled = false;
function updateScroll(){
if(!scrolled){
var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;
}
}
$("#yourDivID").on('scroll', function(){
scrolled=true;
});
関連
-
要素ツリー制御によるvueTreeテーブル
-
Vueのイベント処理とイベントモディファイアの解説
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] divの一番下までスクロールしますか?
-
[解決済み] [Solved] divをコンテナの一番下に配置するには?
-
[解決済み】スクロールバーがあってもdivが常にページの一番下に表示されるようにする
-
[解決済み】ブラウザのウィンドウが下までスクロールされているかどうかを検出するには?
-
[解決済み】ユーザーが一番下までスクロールしたかどうかを確認する(ウィンドウだけでなく、任意の要素)【重複】。
-
[解決済み】jQueryでユーザーがdivの一番下までスクロールしたことを検出する方法
-
[解決済み] テーブルのヘッダーをjQueryで固定し、ユーザーがスクロールして見えなくなったときにも固定されるようにする。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
親子コンポーネント通信を解決する3つのVueスロット
-
要素ツリー制御によるvueTreeテーブル
-
JavaScriptのクロージャの説明
-
vueはopenlayersを使用してスカイマップとガオードマップをロードする
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
vueのプロジェクトでモックを使用する方法を知っていますか?
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
JavaScriptのgetElementById()メソッド入門
-
[解決済み] ページの下まで自動でスクロールさせる