Question

我正在使用jquery，ajax和MySQL在php中创建聊天程序。以及我的问题如何在div溢出时自动向下滚动。

就像当用户输入新行时，它会下降，我想在新消息显示时自动向下滚动。

我尝试使用滚动高度更改来动态执行此操作以触发此$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);。因为使用滚动高度更改它也会滚动到另一边正在聊天的其他用户浏览器。

我也尝试使用keypress和click事件触发向下滚动事件，但这仅适用于当前用户浏览器，因此另一方面对于另一个无法工作或不会自动运行的用户向下滚动，他必须手动滚动才能查看新消息，我不想这样做。

这就是我尝试使用滚动高度事件的原因。我也尝试了mutate插件用于此目的，它只适用于本地主机和实时服务器上的冲突，并且超级慢下来。

所以我必须为这个问题留下这个插件。

所以请在不使用任何插件的情况下向我提供解决方案以实现此目的。

我创造了类似这样的东西

setInterval(function(){
    oldsH = 0;
    newsH = msgBox.prop('scrollHeight');
    if (newsH > oldsH){
    oldsH = newsH
       msgBox.stop().animate({scrollTop:(msgBox[0].scrollHeight)},1000);
    }
},500);

它只适用于setInterval()函数，我不想在此函数中使用它。因为它会一次又一次地触发滚动事件，导致您无法向上滚动以查看较旧的消息。

所以无论如何都要在没有setInterval ??

的情况下实现这一点提前多多感谢。

已更新

Answer 1

如果您只有一个聊天框，而不是一个类，请为其指定一个ID并使用如下代码：

var chatBox = $('#chatBox');
chatBox.scrollTop(chatBox[0].scrollHeight);

供您参考，我创建了 Fiddle

Answer 2

我很高兴知道你是否已经解决了你的问题，因为这是一个两年前的问题。

我一直在为我的客户端搜索与你的功能类似的聊天应用程序。我自己也交替解决了这个问题（因为互联网资源有限）。

根据您的说法，当收到新消息时，自动向下滚动会在用户阅读旧消息时烦恼。因此，您实际上可以提示用户是否收到新消息，并提供一个按钮以向下滚动到最新消息。

这就是我解决问题的方法，也许也是你的问题：）

   // Scroll-to-latest toggle
   $(document).ready(function(){   
           $(BUTTON_DIV).click(function()
         {       
               var latest = $('CONTENT_DIV');
             latest.scrollTop(latest[0].scrollHeight);
           });
     });

   // Prompt with "Scroll-to-latest toggle" if new message detected by scrollheight change
    function customFunc(){  
     var window = $("CONTENT_DIV");
     var scroll = $("BUTTON_DIV");

     if(window.scrollTop() + window.innerHeight() >= window[0].scrollHeight) {
       scroll.hide(); //hide scroll-to-latest toggle
     } else {
       scroll.show(); //show s-t-l toggle
     }
  }
    setInterval (customFunc, UR_INTERVAL); //detect per one ms

完整演示：https://jsfiddle.net/Jvloo/k962u211/

每次滚动高度变化时如何从div检测scrollHeight？

2 个答案: