如何在用户手动滚动时阻止自动滚动?

时间:2014-06-07 13:13:07

标签: javascript jquery html scroll

我有一个聊天应用程序,其中聊天消息以div显示(id:messages_container)

每隔5秒,AJAX请求 - 响应会向messages_container添加新消息。我已经使用代码在新邮件到达时自动滚动到div的底部。

这是我使用的代码:

$("#messages_container").prop({ scrollTop: $("#messages_container").prop("scrollHeight") });

如果用户想要查看之前的消息,他会向上滚动div。问题是,当他手动滚动时,自动滚动工作,然后将用户带到div的底部。

如何在用户手动滚动时阻止自动滚动? 我们有滚动活动吗?

请帮帮我。

1 个答案:

答案 0 :(得分:2)

您可以检查用户滚动,如下所示,然后使用滚动禁用功能,如

//detect user scrolling or browser scrolling start  
var userScroll = false;     

function mouseEvent(e) { 
userScroll = true; 
} 

if(window.addEventListener) {
    document.addEventListener('DOMMouseScroll', mouseEvent,false); 
}


// detect browser/user scroll
$(document).scroll( function(){  
    console.log('Scroll initiated by ' + (userScroll == true ? "user" : "browser"));
});
    //detect user scrolling or browser scrolling end

//this is for scroll disableing
window.onmousewheel = document.onmousewheel = function(e) {
   e = e || window.event;
   if (e.preventDefault)
   e.preventDefault();
   e.returnValue = false;
 };

滚动禁用参考http://ajax911.com/disable-window-scroll-jquery/