防止scrollTop的（上下）滾動條時，點擊/使用

Question

我正在做一個小聊天，只是爲了好玩

當新的消息被加載，它滾動到div（#chatlist）的底部是保存所有消息。但當我使用div的滾動條（overflow：auto）時，它也會嘗試向下滾動。 我該如何避免這種情況？

我曾嘗試過各種不點擊的檢測方法，沒有運氣到目前爲止

這裏是我的代碼。間隔觸發它每幾秒鐘：

var chatlist = $('#chatlist'); 

function chatinterval() { 
    $.ajax({ 
     type: "POST", 
     url: '/chatinterval.php', 
     data: "dbtime=" + latestchat, 
     dataType: "json", 
     success: function (data) { 
      if (data) { 
       chatlist.append(data.dbtext); 
       latestchat = data.dblatest; 
       // this part makes it scroll down 
       chatlist.scrollTop(chatlist[0].scrollHeight - chatlist.height()); 
      } 
     } 
    }); 
} 

Answer 1

可以使用mousedown和scroll事件來控制標記變量（例如clicked）。由於mouseup在您滑過滾動條時未觸發，因此我們可以在每個scroll事件中設置超時（在我的示例中爲5秒），以等待用戶停止手動滾動。因此，最終的代碼應該是這樣的：

var chatlist = $('#chatlist'); 

var timer = null; 
var clicked = false; 

chatlist.on({ 
    mousedown: function() { 
     clicked = true; 
    }, 
    scroll: function() { 
     clearTimeout(timer); 
     timer = setTimeout(function() { 
      clicked = false; 
     }, 5000); 
    } 
}); 

function chatinterval() { 
    $.ajax({ 
     type: "POST", 
     url: '/chatinterval.php', 
     data: "dbtime=" + latestchat, 
     dataType: "json", 
     success: function (data) { 
      if (data) { 
       chatlist.append(data.dbtext); 
       latestchat = data.dblatest; 
       // this part makes it scroll down 
       if (!clicked) { 
        chatlist.scrollTop(chatlist[0].scrollHeight - chatlist.height()); 
       } 
      } 
     } 
    }); 
} 

DEMO：http://jsfiddle.net/rkUt9/