Question

我有一个聊天窗口（只是一个＆lt; ol＆gt;），可以使用overflow:auto滚动。每次收到新邮件时，我都会使用ol.scrollTop = ol.scrollHeight将列表滚动到底部，确保新邮件始终可见。

至少在OSX上，这会触发滚动条出现，不久后再次消失。在这种情况下，我希望保持标准滚动条行为除之外。

我已经尝试::-webkit-scrollbar暂时隐藏滚动条，但a）之后我似乎无法再次显示滚动条b）显然这在其他浏览器中无效。

如何防止滚动条在此过渡期间出现？

Answer 1

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

我把这个非常快速地推到一起来展示。不幸的是，我无法访问Mac进行测试，因此您可能需要在事件监听器中设置超时以删除该类。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

暂时隐藏HTML滚动条

1 个答案: