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

＆＃13;

.scroll-div{

width:200px;
  height:100px;
  overflow-y:scroll;
  
}

＆＃13;

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

＆＃13;

Answer 2

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

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

有关自定义滚动条/滚动条样式的详细信息，请参阅此link。

Answer 3

尝试删除display：block样式并按如下所示修改css。

.scroll-div{

 width:200px;
 height:100px;
 overflow-x:auto;
 overflow-y:auto;
 background-color:yellow;
}

Answer 4

.scroll-div{
  
  height:100px;
  overflow-y:visible;

}

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

使用此CSS代码。

CSS代码

.scroll-div {
  width: 200px;
  height: 100px;
  overflow-y: scroll;
}

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

Answer 6

这是系统偏好中的问题，谢谢

如何让滚动条一直出现？

7 个答案: