0

Jquery経由でデータが追加されたスクロール可能なdivがあります。特定の条件でのみ下に自動スクロールするようにしようとしています。

  • データが最初に読み込まれる (.append) ときは、一番下までスクロールする必要があります。
  • div が一番下までスクロールされると、各 .append の後に div の一番下に残る必要があります
  • div が下部になく、ロード (.append) 後にスクロールされない場合。

データをロードするたびに div を一番下に保持する方法に関する多くのトピックを見つけましたが、3 番目の条件に関連するものはまだ見つかりませんでした。誰かが私を正しい方向に向けることができれば、それは大歓迎です。

アップデート

これが私が今持っているものです。うまく機能しますが、上部に何かを読んでいると、非常に面倒です。

$("#chatroom").scrollTop($("#chatroom")[0].scrollHeight);

スクロールバーがどこにあるかがわかれば、ifステートメントを実行して、スクロールバーが一番下にない場合にこれが実行されないようにすることができるようです。

アップデート #2

XD では機能していないように見えるスクリプトを見つけました。それは他の人のために働くようです。私は今それを機能させようとしています。テスト後、スクロール バーを動かさない場合は動作するように見えます。スクロール バーを動かした場合、IF は true を返さず、下に移動することもありません。

function divbottom() {
              var chatroom = document.getElementById (chatroom);
              if (chatroom.offsetHeight + chatroom.scrollTop >= chatroom.scrollHeight) {
                $("#chatroom").scrollTop($("#chatroom")[0].scrollHeight);
              }
            }
4

2 に答える 2

2

解決策は、height、scrollTop、および scrollHeight プロパティを使用することです (2 回目の更新で述べたように)。

ただし、コンテンツを追加する前に、これらの値を必ず取得してください。

var height = $("#chatroom").height(),
    scrollTop = $("#chatroom")[0].scrollTop,
    scrollHeight = $("#chatroom")[0].scrollHeight;
$("#chatroom").html($("#chatroom").html() + content);
if(height + scrollTop >= scrollHeight) {
    divbottom();
}

これは、必要なことを行うjsfiddleの作業スクリプトです（Firefox、Chromium、およびOperaでテスト済み）。

于 2013-03-20T00:33:16.403 に答える
0

アントヨの答えを拡張するには...次の行に注意します。

$("#chatroom").html($("#chatroom").html() + content);

私は最近似たようなことをしていました。この方法でブラウザをすばやくクラッシュさせることができます。代わりにこれを行うことをお勧めします：

$("#chatroom").append(content);
于 2014-03-13T18:39:56.433 に答える