AJAX聊天-自动向下滚动，但是在用户向上滚动时不拖动吗? [英] AJAX Chat - Automatically drag the scroll down, but don't drag it when the user is scrolling up?

问题描述

您知道大多数聊天如何进行，当出现新消息时，滚动会下降. 我的聊天每5000毫秒重新加载一次，然后在300毫秒后向下滚动.

You know how it most of the chats, the scroll goes down, when a new message appears. My chat reloads every 5000 ms, and then drags the scroll down 300ms after.

但是我想做到这一点，所以当用户向上拖动滚动条时，滚动拖动不会影响他. 一旦用户向上滚动，是否有一个函数可以填充类似draggedScroll = true的变量?

But I want to make it, so when user drags the scroll up, the scroll drag won't affect him. Is there a function, to fill a variable like, draggedScroll = true once the user scrolled up?

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

这是聊天室，如您所见，如果您向上移动，它将每隔5000ms向下拖动一次，我想仅在用户向上滚动时才阻止它. 并且如果用户再次滚动到底部的[0]，则会使draggedScroll = false，从而再次影响到他.

this is the chat, and as you see, if you go up, it will drag you every 5000ms down, and I want to prevent it ONLY when the user scrolls up. and if the user has scrolled to the bottom [0] again, it will make draggedScroll = false, so it will affect him again.

我该怎么做?

问题尚未解决！

Problem hasn't been solved!

问题说明:

滚动将仅可工作如果，滚动的高度将至少为1500px( scrollTop(1500))(34条消息)在聊天中).

The scroll will only work IF the height of the scroll will be at-least 1500px (scrollTop(1500)) (34 messages in chat).

如果低于该值，则滚动将不起作用，并且会在出现新消息时向上滚动.

If it is below that, scroll will not work, and will scroll up upon new message.

推荐答案

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像素(因为它始终会低于整个高度).

Basically what I did there, I took the current position of the scroll, and added 470 px to it (since it will always be lower than the whole height).

然后检查新高度是否为<比原来的高度+ 150px.

And then check, if the new height, is < than the old height + 150px.

如果是，则向下滚动.否则保持在同一位置.

If yes, then scroll down. else stay on same position.

这篇关于AJAX聊天-自动向下滚动，但是在用户向上滚动时不拖动吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！