2017-06-12 205 views
0

我有一个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>

谁能请帮助我的问题

+0

在您的滚动事件侦听器中,您使用Id scrollBottom检查目标,它应该是滚动体。 –

回答

1

这里你的条件是失败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