AJAXチャット - スクロールを自動的に下にドラッグしますが、スクロールしているときにドラッグしないでください。

Question

新しいメッセージが表示されたら、そのチャットの大部分がスクロールしています。 チャットは5000ミリ秒ごとにリロードされ、その後スクロールが300ミリ秒遅れてドラッグされます。

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

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

これはチャットで、あなたが見るようにあなたが上がるならば、それはダウンあなたのすべての5000msをドラッグします、と私は場合にのみ、ユーザーがスクロールアップし、それを防ぎたいです。 ユーザーが再び下部[0]にスクロールすると、draggedScroll = falseになり、再び彼に影響します。

どうすればよいですか？

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

問題の説明：

スクロールがスクロールの唯一作業 IF高さはAT-少なくとも1500px（scrollTopスプライト（1500））（チャット中34件のメッセージ）になります。

これ以下の場合、スクロールできなくなり、新しいメッセージがスクロールします。

Answer 1

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); 
     }   
    });  
} 

基本的に私がそこで何をしたのか、私はスクロールの現在の位置をとり、それに470pxを追加しました（常に全体の高さよりも低くなるため）。

新しい高さが古い高さ+ 150pxよりも<であるかどうかを確認します。

「はい」の場合は下にスクロールします。そうでなければ同じ位置にとどまる。

Answer 2

element.scrollTopをご確認ください。 element.scrollHeight - element.heightと等しい場合はスクロールし、そうでない場合はスクロールしないでください。

element = $("#chat")[0]; 
if (element.scrollTop == element.scrollHeight - element.height) 
    element.scrollTop(element.scrollHeight); 

Answer 3

私は問題を自分で持っていたし、私はそれを解決する方法、これは次のとおりです。イベントハンドラ内の適切なコンテナ

のscrollイベントにバインドが読み出さ

1. ：
   • $(element).scrollTop()
   • $(element).prop('scrollHeight')
   • $(element).height()
2. スクロールバーが一番下にあるときにscrollTop == scrollHeight - height
3. 条件がtrueの場合：それ以外の場合は、それを無効にし、自動化されたスクロールを可能にします。
4. ユーザーエクスペリエンスを向上させるためのマージンのいくつかの種類引く必要に応じて（私の解決策を参照してください）スクロールバーがisdragedながら同じように、フラグを設定

My solution (written in 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(); 
    } 
}); 

Answer 4

：

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