Question

我有一个聊天系统：http://driptone.com/jony/applications/chat/index.php

每当重新加载或有人发布时，ajax都会将滚动条返回到底部：

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

我要做的是：

当用户向上滚动时，向下滚动 NOT 会影响他。在聊天中总消息 ＆gt; 超过30时有效的方法。（当聊天中有超过30封邮件时，我没有计算。

                    var height = $('#chat')[0].scrollHeight;                        
                    if ($('#chat').scrollTop() > height)
                    {
                        $('#chat').scrollTop(height);
                    }

这种方法有效，但是一旦我修剪了我的聊天，它就出于某种原因停止了工作。我不明白为什么。

为什么这样做？有我的JS代码：

    var earlier;
    var mayscroll;

    $('#chat').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();
        }
    });

    $(document).ready(function() {              
            var canPost;                
            reload();
            $("#login").submit(function(event) {
                    event.preventDefault();
                    $.post("ajax.php", { login : $("#guest").val() }, function(data) {
                            $.post("ajax.php", { send : "Has joined the chat" }, function() {
                                    location.reload();
                            });
                    });
            });
            $("#load").click(function() {
                earlier = true;
                reloadEarlier()
                $("#load").fadeOut("slow");
                $("#load").html('');                    
            });
            $("#loginuser").submit(function(event) {
                    event.preventDefault();
                    $.post("ajax.php", { username : $("#user").val() }, { password : $("#pass").val() }, function(data) {
                            if (data == 'true')
                            {
                                    $.post("ajax.php", { send : "Has joined the chat" }, function() {
                                            location.reload();
                                    });
                            }
                            else
                            {
                                    $(".errors").html(data);
                            }
                    });
            });            
            $(".send-message").submit(function(event) {
                    $("#loading").show();
                    event.preventDefault();        
                    if (canPost != false) {
                            if ($("#message").val().length > 0)
                            {
                                    $.post("ajax.php", { send : $("#message").val() }, function(data) {
                                            canPost = false;
                                            $(".errors").html(data);
                                            setTimeout(function() {
                                                    canPost = true;
                                            }, 500);

                                            if (earlier != true)
                                            {
                                                reload();                                               
                                            } else {
                                                reloadEarlier();                                                            
                                            }

                                            if ($(".error").val() != null) {
                                                    $(".error").html("");
                                            }
                                            $("#loading").hide();                                               
                                    });
                                    $("#message").val("");
                            } else {
                                    $(".error").html("Your message is too short...");
                                    $("#loading").hide();
                            }
                    } else {
                            $(".error").html("Please wait 3 seconds before posting again...");             
                            $("#loading").hide();
                    }
                    if ($(".error").val() != null) {
                            setTimeout(function() {
                                    $(".error").html("");
                            }, 3000);      
                    }           
            }); 
        setInterval(function() {
                pingServer();
                checkIfNeedEarlier();               
        }, 5000);           
    });

    var hold = "<span style='color: lightblue; cursor: pointer;'>Load Earlier (30 more)<br /></span>";
    function checkIfNeedEarlier() {
        if (earlier != true) {
            $.post('ajax.php', { earlier : '1' }, function(data) {
                if (data > 30) {
                    $("#load").html(hold);
                    $("#load").fadeIn("slow");
                } else {
                    $("#load").fadeOut("slow");
                    $("#load").html('');
                }
            });
        }
    }
    function pingServer() {
            $.post("ajax.php", { ping : "true" }, function() {

                if (earlier != true)
                {
                    reload();
                } else {
                    reloadEarlier();
                }
            });    
    }
    function reload() {
            $.post("ajax.php", { loadMessages : "1" }, function(data) {
                    $(".discussion").html(data)

                    var height = $('#chat')[0].scrollHeight;                        
                    if ($('#chat').scrollTop() > height)
                    {
                        $('#chat').scrollTop(height);
                    }
            });
    }
    function reloadEarlier()
    {
            $.post("ajax.php", { loadEarlier : "1" }, function(data) {
                    $(".discussion").html(data);
                    if (mayscroll == true) {
                      var height = $('#chat')[0].scrollHeight;
                      $('#chat').scrollTop(height);
                    }                       
            })              
    }

这是我的CSS：

#chat,
.post-message {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.14);
    height: 450px;
    margin: 20px auto;
    overflow-y: scroll;
    width: 400px;
}

Answer 1

像这样：http://jsfiddle.net/eP24K/2/（请参阅html / css以及下面的代码）

function insertLine() {
    var scrollPosition = $("#chat").scrollTop();
    var scrollHeight = $("#chat")[0].scrollHeight;
    //console.log(scrollPosition,scrollHeight);
    $("#chat").append("<div>James: Hello World!</div>");
    if (scrollPosition+$("#chat").height() === scrollHeight) { 
        $("#chat").scrollTop(scrollHeight);       
    }
    setTimeout(function(){
        insertLine();
    }, (Math.floor(Math.random()*1000)))
}
insertLine();

代码绝不是优化的，只是概念。

AJAX聊天滚动如果有超过20-30条消息，如果用户没有向上滚动，滚动到底部将起作用

1 个答案: