css - 如何让滚动条一直出现？

Question

我创建了一个带滚动条的 div。但是当鼠标指针离开屏幕时，滚动条会隐藏。无论我的鼠标是否悬停，是否有可能显示滚动条在那里显示。？？ 我用 Mozilla Firefox 和 chrome 试过了。

当您开始滚动时，会出现滚动条。完成后它会消失。

.scroll-div{

width:200px;
  height:100px;
  overflow-y:scroll;
}
.scroll-div::-webkit-scrollbar { 
  /* This is the magic bit */
  display: block;
}

<div class="scroll-div">
test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>test<br/>
  
  test<br/>
  test<br/>
  test<br/>
  test<br/>test<br/>
  test<br/>
  test<br/>
  test<br/>
</div>

Answer 1

你正在使用 ::-webkit-scrollbar 伪元素来设置滚动样式。但是在使用它时不显示浏览器的默认滚动条，这就是您看不到它的原因。此外，它仅在 webkit 浏览器中受支持。如果你想要自定义滚动条，你应该使用像 sly 和其他的 javascript 库。如果你想要默认滚动条，你可以删除这部分

.scroll-div::-webkit-scrollbar { 
  /* This is the magic bit */
  display: block;
}

有关自定义滚动条/滚动条样式的更多信息，请参阅此 link .