web-dev-qa-db-ja.com

チャットdivを自動的にスクロールダウン

私はチャットをロードするためにこのコードを持っています

    function getMessages(letter) {
    var div = $("#messages");
    $.get('msg_show.php', function(data) {
        div.html(data);   
    });
}

setInterval(getMessages, 100);

ページの読み込み時に#messages divを自動的にスクロールダウンし、新しいチャットの投稿ごとに再度追加する必要があるものは何ですか？

これは機能しません：

    function getMessages(letter) {
    var div = $("#messages");
    $.get('msg_show.php', function(data) {
        div.html(data);
        $('#messages').scrollTop($('#messages')[0].scrollHeight);
    });
}

setInterval(getMessages, 100);
javascriptjqueryscrollchat
14
Adam Výborný

最初に、スクロールに関するいくつかの便利な概念を確認しましょう。

  • scrollHeight ：コンテナの合計サイズ。
  • scrollTop ：ユーザーが行ったスクロールの量。
  • clientHeight ：ユーザーに表示されるコンテナの量。

いつスクロールしますか？

  • ユーザーが初めてメッセージをロードしました。
  • 新しいメッセージが到着し、スクロールの最下部にいます（ユーザーが前のメッセージを読むために上にスクロールしているときに強制的にスクロールしたくない）。

プログラム的には：

if (firstTime) {
  container.scrollTop = container.scrollHeight;
  firstTime = false;
} else if (container.scrollTop + container.clientHeight === container.scrollHeight) {
  container.scrollTop = container.scrollHeight;
}

フルチャットシミュレーター（JavaScriptを使用）：

https://jsfiddle.net/apvtL9xa/

const messages = document.getElementById('messages');

function appendMessage() {
        const message = document.getElementsByClassName('message')[0];
  const newMessage = message.cloneNode(true);
  messages.appendChild(newMessage);
}

function getMessages() {
        // Prior to getting your messages.
  shouldScroll = messages.scrollTop + messages.clientHeight === messages.scrollHeight;
  /*
   * Get your messages, we'll just simulate it by appending a new one syncronously.
   */
  appendMessage();
  // After getting your messages.
  if (!shouldScroll) {
    scrollToBottom();
  }
}

function scrollToBottom() {
  messages.scrollTop = messages.scrollHeight;
}

scrollToBottom();

setInterval(getMessages, 100);
#messages {
  height: 200px;
  overflow-y: auto;
}
<div id="messages">
  <div class="message">
    Hello world
  </div>
</div>
32
zurfyx

HTMLコードを知らずに伝えるのは難しいですが、divに高さが設定されていないか、オーバーフローが許可されていない（またはCSS _height: 200px; overflow: auto_など）とは思わないでしょう。

Jsfiddleで動作するサンプルを作成しました： http://jsfiddle.net/hu4zqq4x/

Div内にダミーのHTMLマークアップをいくつか作成しました。a）オーバーフローし、b）設定された高さです。スクロールは、関数を呼び出すことで行われます

_function getMessages(letter) {
    var div = $("#messages");
    div.scrollTop(div.prop('scrollHeight'));
}
_

、この場合は「documentReady」で一度。

prop('scrollHeight')は、一致した要素のセットの最初の要素のプロパティの値にアクセスします。

9
UweB

jQueryに追加した後、この行を追加するだけです

<script>
    $("#messages").animate({ scrollTop: 20000000 }, "slow");
</script>
3
Govan

あなたがする必要があるのは、それを2つのdivに分割することです。オーバーフローがスクロールするように設定されたものと、テキストを保持して外側のサイズを取得できるようにする内側のもの。

<div id="chatdiv">
    <div id="textdiv"/>
</div>

textdiv.html("");
$.each(chatMessages, function (i, e) {
    textdiv.append("<span>" + e + "</span><br/>");
});
chatdiv.scrollTop(textdiv.outerHeight());

ここでjsfiddleを確認できます： http://jsfiddle.net/xj5c3jcn/1/

明らかに、テキストdiv全体を毎回再構築する必要はありません。そのため、ほんの一例に過ぎません。

1
aqez

私はjsの達人ではありませんが、ユーザー自身が最下位にいるかどうかを確認するコードを自分で書いています。ユーザーが最下部にいる場合、チャットページは新しいメッセージで自動的にスクロールします。ユーザーが上にスクロールすると、ページは下に自動スクロールしません。

JSコード-

var checkbottom;
jQuery(function($) {
$('.chat_screen').on('scroll', function() {
    var check = $(this).scrollTop() + $(this).innerHeight() >= $(this) 
[0].scrollHeight;
    if(check) {
       checkbottom = "bottom";
    }
    else {
    checkbottom = "nobottom";
    }
})
});
window.setInterval(function(){
if (checkbottom=="bottom") {
var objDiv = document.getElementById("chat_con");
objDiv.scrollTop = objDiv.scrollHeight;
}
}, 500);

htmlコード-

<div id="chat_con" class="chat_screen">
</div>
0
Gaurav Saini

実験中にこの非常に簡単な方法を見つけました：scrollToをdivの高さに設定します。

var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);
0
Cubetastic
    var l = document.getElementsByClassName("chatMessages").length;
    document.getElementsByClassName("chatMessages")[l-1].scrollIntoView();

これは動作するはずです

0
iErcan

高さをスクロールするだけの場合、ユーザーが前のメッセージを見たいときに問題が発生します。そのため、新しいメッセージが来たらコードだけが来るような何かを作成する必要があります。 jquery最新バージョンを使用します。 1.ここで、メッセージを読み込む前に高さをチェックしました。 2.新しい高さを再度確認します。 3.高さがその時間だけ異なる場合はスクロールし、そうでない場合はスクロールしません。 4. if条件ではなく、必要な着信音やその他の機能を配置できます。新しいメッセージが来ると再生されます。ありがとう

var oldscrollHeight = $("#messages").prop("scrollHeight");
$.get('msg_show.php', function(data) {
    div.html(data);
    var newscrollHeight = $("#messages").prop("scrollHeight"); //Scroll height after the request
    if (newscrollHeight > oldscrollHeight) {
        $("#messages").animate({
            scrollTop: newscrollHeight
        }, 'normal'); //Autoscroll to bottom of div
    }
0
Sayed Khan Prince

Jqueryとjavascriptを混在させる必要はありません。このように使用して、

_function getMessages(letter) {
    var message=$('#messages');
    $.get('msg_show.php', function(data) {
        message.html(data);
        message.scrollTop(message[0].scrollHeight);
    });
}

setInterval(function() {
    getMessages("letter");
}, 100)
_

scrollTop()メソッド内にget()を配置します。

また、getMessageメソッド呼び出しのパラメーターが欠落しています。

0
Anoop Joshi

メッセージボックスの上部から特定の要素までスクロールするには、次のデモをチェックアウトします。

https://jsfiddle.net/6smajv0t/

function scrollToBottom(){
        const messages = document.getElementById('messages');
        const messagesid = document.getElementById('messagesid');  
        messages.scrollTop = messagesid.offsetTop - 10;
}

scrollToBottom();
setInterval(scrollToBottom, 1000);
#messages {
  height: 200px;
  overflow-y: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messages">
  <div class="message">
    Hello world1
  </div>
  <div class="message">
    Hello world2
  </div>
  <div class="message">
    Hello world3
  </div>
  <div class="message">
    Hello world4
  </div>
  <div class="message">
    Hello world5
  </div>
  <div class="message">
    Hello world7
  </div>
  <div class="message">
    Hello world8
  </div>
  <div class="message">
    Hello world9
  </div>
  <div class="message" >
    Hello world10
  </div>
  <div class="message">
    Hello world11
  </div>
  <div class="message">
    Hello world12
  </div>
  <div class="message">
    Hello world13
  </div>
  <div class="message">
    Hello world14
  </div>
  <div class="message">
    Hello world15
  </div>
  <div class="message" id="messagesid">
    Hello world16 here
  </div>
  <div class="message">
    Hello world17
  </div>
  <div class="message">
    Hello world18
  </div>
  <div class="message">
    Hello world19
  </div>
  <div class="message">
    Hello world20
  </div>
  <div class="message">
    Hello world21
  </div>
  <div class="message">
    Hello world22
  </div>
  <div class="message">
    Hello world23
  </div>
  <div class="message">
    Hello world24
  </div>
  <div class="message">
    Hello world25
  </div>
  <div class="message">
    Hello world26
  </div>
  <div class="message">
    Hello world27
  </div>
  <div class="message">
    Hello world28
  </div>
  <div class="message">
    Hello world29
  </div>
  <div class="message">
    Hello world30
  </div>
</div>
0
Bhagyesh Patel

私のために働いたこれを試して、疑問がある場合は教えてください、

setInterval(function () {
    $("#messages").load("msg_show.php");

   $("#messages").animate({
        scrollTop: $("#messages")[0].scrollHeight}, -500);

}, 1000);
0
Shaik Matheen