修复聊天分区中的滚动条问题

Question

My Ajax code：

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. 给两个潜水员相同的高度。事实上，它们应用了完全相同的boxCSS 类。
将div 并排放
3. 置。
4. 然后减小滚动条的宽度。
5. 将滚动条放在聊天窗口旁边，使其看起来像是聊天窗口的一部分。
6. .bottomDock属性追加到滚动条的 jQuery 对象。这是一个隐藏/不可见的属性，但它是一个有用的标志/布尔值。
7. 当 Ajax 从服务器调用往返时，它会将 1 行推送到聊天消息窗口的底部。它还将 1 个<BR>标记推送到滚动条窗口的底部。这允许 2 倍滚动条高度保持不变。然后，它运行runScroll()方法以确保高度相同。(毕竟，长聊天消息可能会包装 &1<BR>标签是不够的！它需要 2 个<BR><BR>标签，我们不会添加这些标签。
8. 当用户将鼠标悬停在滚动条上时，.bottomDock布尔值将从true翻转到false。这允许滚动条脱离其停靠位置，并允许用户自由向上或向下滚动。
9. 当鼠标悬停在滚动条之外时，.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);

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