9

ほとんどのチャットで、新しいメッセージが表示されるとスクロールが下がることをご存知でしょう。私のチャットは 5000 ミリ秒ごとにリロードされ、300 ミリ秒後にスクロールが下にドラッグされます。

しかし、私はそれを作りたいので、ユーザーがスクロールを上にドラッグしても、スクロールのドラッグは彼に影響しません。ユーザーが上にスクロールしたら、draggedScroll = true のような変数を埋める関数はありますか?

http://driptone.com/jony/applications/chat/index.php

これはチャットです。ご覧のとおり、上に移動すると、5000 ミリ秒ごとに下にドラッグされます。ユーザーが上にスクロールする場合にのみ防止したいと考えています。ユーザーが再び一番下 [0] までスクロールすると、draggedScroll = false になり、ユーザーに再び影響を与えます。

それ、どうやったら出来るの？

問題は解決していません！

問題の説明:

スクロールは、スクロールの高さが少なくとも 1500px ( scrollTop (1500) ) (チャットで 34 メッセージ)の場合にのみ機能します。

それより下にある場合、スクロールは機能せず、新しいメッセージで上にスクロールします。

4

4 に答える 4

5 
function reload() {
    var oldscrollHeight = ($("#chat").scrollTop() + 470);
    console.log(" old: " + oldscrollHeight);
    $.post("ajax.php", { loadMessages : "1" }, function(data) {
        $(".discussion").html(data); 
        var newscrollHeight = $("#chat").prop("scrollHeight");
        console.log(" new: " + newscrollHeight);
        if(newscrollHeight < (oldscrollHeight + 150)) {
            var height = $('#chat')[0].scrollHeight;
            $('#chat').scrollTop(height);
        }           
    });     
}

基本的に私がそこで行ったことは、スクロールの現在の位置を取得し、それに 470 px を追加したことです (常に全体の高さよりも低いため)。

次に、新しい高さが古い高さ + 150px より小さいかどうかを確認します。

はいの場合は、下にスクロールします。それ以外は同じ位置に留まります。

于 2013-06-27T22:59:36.237 に答える
4

私は自分で問題を抱えていましたが、これが私がそれを解決した方法です：

  1. scroll適切なコンテナのイベントにバインドします
  2. イベントハンドラー内で次のように読み上げられます。
    • $(element).scrollTop()
    • $(element).prop('scrollHeight')
    • $(element).height()
  3. スクロールバーが下にあるときscrollTop == scrollHeight - height
  4. 条件が次の場合true: 自動スクロールを有効にし、それ以外の場合は無効にします。
  5. 必要に応じて、ユーザーエクスペリエンスを向上させるために何らかのマージンを差し引きます（私の解決策を参照してください）

私の解決策（CoffeeScriptで書かれています）

$('#messageContainer').on('scroll', function(event) {
  var element, height, scrollHeight, scrollTop;
  element = $(this);
  scrollTop = element.scrollTop();
  scrollHeight = element.prop('scrollHeight');
  height = element.height();
  if (scrollTop < scrollHeight - height - 25) {
    disableScroll();
  }
  if (scrollTop > scrollHeight - height - 10) {
    return enableScroll();
  }
});
于 2013-06-21T13:07:11.600 に答える
2

にチェックを入れてくださいelement.scrollTop。等しい場合element.scrollHeight - element.heightはスクロールし、そうでない場合はスクロールしません。

element = $("#chat")[0];
if (element.scrollTop == element.scrollHeight - element.height)
    element.scrollTop(element.scrollHeight);
于 2013-06-21T13:06:47.863 に答える
1

次のように、スクロールバーがドラッグされている間にフラグを設定するだけです。

var bScroll = true; // My flag for true = scrolling allowed, false = scrolling prevented

$('#scrollbar').focus(function(){ bScroll = false; );
$('#scrollbar').focusOut(function(){ bScroll = true; );

function scroll(){
   if(!bScroll){ 
        return false
   }
}

更新: 右、bScroll をチェック

于 2013-06-21T13:08:35.637 に答える