暂时隐藏 HTML 滚动条

Question

我有一个聊天窗口（只是一个

），可以使用overflow:auto滚动。每次收到新消息时，我都会使用 ol.scrollTop = ol.scrollHeight 使列表滚动到底部，确保新消息始终可见。

至少在OSX上，这会触发滚动条出现，不久后再次消失。我想保留标准的滚动条行为，但这种情况除外。

我试图::-webkit-scrollbar暂时隐藏滚动条，但是 a）之后我似乎无法再次显示它，b） 显然这在其他浏览器中不起作用。

有什么想法可以防止滚动条在这一次过渡期间出现吗？

Answer 1

一种解决方案是使用 JavaScript 向ol添加一个覆盖 overflow 属性的类，然后通过添加 scroll 事件侦听器再次删除该类。

我很快就把这个放在一起来演示。不幸的是，我无法访问 Mac 来测试它，因此您可能需要在事件侦听器中设置超时以删除类。

var list=document.getElementById("list");
setTimeout(down,2000);
list.addEventListener("scroll",function(){
    list.classList.remove("noscroll");
},0)
function down(){
    list.classList.add("noscroll");
    list.scrollTop=list.scrollHeight;
    setTimeout(up,2000);
};
function up(){
    list.classList.add("noscroll");
    list.scrollTop=0;
    setTimeout(down,2000);
};

#list{
    box-sizing:border-box;
    height:200px;
    overflow:auto;
	width:200px;
}
#list.noscroll{
    overflow:hidden;
    padding-right:20px;
}

<div id="list">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>