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

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。

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

你需要做的是：

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

请参阅我的jsfiddle以获取此代码的工作演示。

这是一个聊天室的构建方式，使用与chatMessages窗口同步的假滚动条。

HTML：

<div class="chatRoom">
    <div id="chatMessages" class="box"></div>
    <div id="scrollbar" class="box"></div>
</div>

CSS：

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

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

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

JavaScript的：

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);

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