如何让滚动条一直出现？答案

【问题标题】：how to make scroll bar appear all the time?如何让滚动条一直出现？
【发布时间】：2017-01-04 14:09:33
【问题描述】：

我创建了一个带有滚动条的 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>

【问题讨论】：

滚动条显示正常，没有隐藏
CSS - Overflow: Scroll; - Always show vertical scroll bar?的可能重复

标签： css html

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

尝试删除 display:block 样式并修改 css 如下。

.scroll-div{

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

【讨论】：

【解决方案3】：

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

这和你要找的一样吗？

希望这会有所帮助。

【讨论】：

谢谢，但这不是我要找的，当您开始滚动时，您会看到滚动条出现在右侧？？我需要那个栏总是显示不出现和消失
谢谢，但这不是我要找的，当您开始滚动时，您会看到滚动条出现在右侧？？我需要那个栏总是显示不出现和消失

【解决方案4】：

使用此 CSS 代码。

CSS 代码

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

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

【讨论】：

【解决方案5】：

<!--please use only this very code-->

.scroll-div{

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

<!--don't use this one-->

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

【讨论】：

【解决方案6】：

这是系统偏好设置的问题，谢谢

【讨论】：

【解决方案7】：

.scroll-div{

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

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

【讨论】：

滚动条按钮仍然消失