1. ホーム
  2. javascript

[解決済み] ユーザーが上にスクロールしない限り、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;
});