无法移动div内的滚动条
问题描述:
我有一个div,当用户从窗体发送数据时动态填充,它类似于聊天框。用户结束消息并且该消息在div内显示。现在这个div有一个滚动条,应该停留在底部,但如果用户滚动,那么它应该保持在用户保留的位置无法移动div内的滚动条
问题是,虽然滚动条停留在底部,但是当用户将其拉起来,然后将其拉到底部,并且用户不能使用它滚动。
为格码
var youInterval;
function startInterval() {
youInterval = setInterval(function() {
var elem = document.getElementById('scrollbody');
elem.scrollTop = elem.scrollHeight;
}, 500);
}
document.addEventListener('scroll', function(event) {
if (event.target.id === 'scrollBottom') {
clearInterval(youInterval);
}
}, true);
startInterval();
.chatbox__body {
overflow-y: auto;
}
<div class="chatbox__body" id="scrollbody"></div>
谁能请帮助我的问题
答
这里你的条件是失败if (event.target.id === 'scrollBottom') {
通过滚动产生的event
是文件所以,event.target.id
实际上是检查id
不在那里的文件的财产。
你必须先禁用身体溢出,然后添加溢出的div
html,body{ height:100%; width:100%;overflow:hidden;}
.chatbox__body {
overflow-y: auto;
height:100%;
}
在你的JS支票if (event.target.id === 'scrollbody') {
代码片段
var youInterval;
function startInterval() {
youInterval = setInterval(function() {
var elem = document.getElementById('scrollbody');
elem.scrollTop = elem.scrollHeight;
}, 500);
}
document.addEventListener('scroll', function(event) {
debugger;
if (event.target.id === 'scrollbody') {
clearInterval(youInterval);
}
}, true);
startInterval();
html,body{ height:100%; width:100%;overflow:hidden;}
.chatbox__body {
overflow-y: auto;
height:100%;
}
#content{
height:200%;
width:100%;
background-color:red;
}
<div class="chatbox__body" id="scrollbody">
<div id="content"></div>
</div>
+0
工作得很好谢谢 – user3732711
在您的滚动事件侦听器中,您使用Id scrollBottom检查目标,它应该是滚动体。 –