Question

我的Ajax代码：

function ajax() {
    var id = document.getElementById("chat");
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        if (req.readyState == 4 && req.status == 200) {   
            var scrollpos1 = $('#chat').scrollTop;
            var scrollpos = parseInt(scrollpos1) + 450;
            var scrollheight = $('#chat').prop('scrollheight');
            id.innerHTML = req.responseText; 
            if (scrollpos < scrollheight) {

            }
            else {
                $('#chat').scrollTop($('#chat').prop('scrollHeight'));
            }
        }
    }

    req.open('POST','msg.php',true);
    req.send();
}

setInterval(function(){ajax()},1000);

我使用此代码将滚动条定位在聊天div的底部，但我无法移动滚动条。所以我的问题是：如何让用户可以向上移动滚动条，同时确保在新消息进入聊天div后滚动条跳到底部？

我的CSS代码：

#chat{
    width: 500px;
    height: 450px;
    overflow-y: scroll;
}

Answer 1

有可能做到这一点！查看我的jsfiddle。

由于我之前已经构建了一个聊天室组件，我将解释这个主级滚动条技巧的工作原理。

您需要做的是：

构建2个div。第一个是聊天消息窗口。第二个是假的滚动条div。
给两个div设置相同的高度。实际上，它们具有应用于它们的完全相同的box CSS类。
将divs浮动在一起。
然后减小滚动条的宽度。
将滚动条放在聊天窗口旁边，看起来就像是它的一部分。
.bottomDock属性附加到滚动条的jQuery对象。它是一个隐藏/不可见的属性，但它是一个有用的标志/布尔值。
当Ajax调用从服务器往返时，它会将1行推到chatMessages窗口的底部。它还将1 <BR>标记推送到滚动条窗口的底部。这允许2x滚动条高度保持不变。然后它运行runScroll()方法以确保高度相同。（毕竟，长聊天消息可能会包含＆amp; 1 <BR>标记是不够的！它需要2个<BR><BR>标记，我们不会添加。）
当用户将鼠标悬停在滚动条上时，.bottomDock布尔值会从true翻转为false。这允许滚动条脱离它的停靠位置＆amp;允许用户自由地向上或向下滚动。
当鼠标离开滚动条时，.bottomDock布尔值会从false翻转回true。它重新进入底部码头。此演示代码会自动回到底部停靠位置＆amp;聊天消息将重新出现，以便在页面加载时自动向上滚动。
当chatBox底部停靠时，runScroll()也运行chatMessages方法。这可确保在将消息发布到chatMessages窗口后，滚动条似乎已停靠。否则，滚动条想要向上移动1行＆amp;将向下箭头从灰色（禁用状态）翻转为黑色（启用状态）。

有关此代码的有效演示，请参阅我的jsfiddle。

这就是使用与<div class="chatRoom"> <div id="chatMessages" class="box"></div> <div id="scrollbar" class="box"></div> </div>窗口同步的假滚动条构建聊天室的方式。

<强> HTML：

.chatRoom .box {
    float: left;
    height: 200px;
    width: 300px;  
}

.chatRoom #chatMessages {
    overflow-y: hidden;
}

.chatRoom #scrollbar {
    overflow-y: scroll;
    width: 8px;
}

<强> CSS：

var chatBox = $('#chat');
var scrollbar = $('#scrollbar');

scrollbar.bottomDock = true;

function ajax() {
    var xhr = new XMLHttpRequest();
    xhr.open('POST','anyUrl.php', true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var msg = xhr.responseText;
            msg = '<div>' + msg + '</div>';
            chatBox.append(msg);
            scrollbar.append('<BR>');
            if (scrollbar.bottomDock) {
                runScroll();
            }
        }
    }
    xhr.send();
}

function runScroll(event) {
    if (scrollbar.bottomDock) {
        // Stay docked to the bottom
        var scrollHeight = chatBox[0].scrollHeight;
        scrollbar[0].scrollTop = scrollHeight;
        chatBox[0].scrollTop = scrollHeight;
    } else {
        // Scroll Freely
        scrollTop = event.target.scrollTop;
        scrollDirection = (scrollTop > scrollbar.lastScrollTop) ? 'down' : 'up';
        chatBox[0].scrollTop = scrollbar[0].scrollTop;
        scrollbar.lastScrollTop = scrollTop;
    }
}

chatBox.on('scroll', function(event) {
    if (scrollbar.bottomDock) {
        runScroll(event);
    }
});

scrollbar.on('scroll', function(event) {
    if (!scrollbar.bottomDock) {
        runScroll(event);
    }
});

scrollbar.on('mouseout', function () {
    scrollbar.bottomDock = true;
    runScroll();
});

scrollbar.on('mouseover', function () {
    scrollbar.bottomDock = false;
});

setInterval(function() {
    ajax();
}, 1000);

<强> JavaScript的：

我将在下一个项目中使用它！享受！

修复聊天div中的滚动条问题

1 个答案: