css - 滚动条样式神秘地改变了

Question

出于某种原因，我的滚动条的样式发生了变化。

我没有更改任何溢出样式(我正在为我的 div 使用 overflow-y: scroll)。

当 div 不滚动时，滚动条会消失，类似于 Facebook 聊天中使用的滚动条。

现在它有这个静态边框并且滚动条不会消失:

我使用 Chrome 作为我的浏览器。

Answer 1

您可以使用一些 javascript 来检测用户何时滚动然后显示滚动条

这是一个片段

function scroll(e){
e.target.style.overflow='scroll';
}
function noscroll(e){
e.target.style.overflow='hidden';
}
document.getElementById('div').onwheel=scroll;
document.getElementById('div').onmouseout=noscroll;

div {
  width:200px;
  height:100px;
  border:solid black;
  overflow-y: hidden;
  
}

<div id="div">
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line

</div>