使滚动条始终在div - chrome中可见

Question

我第一次实现了无限滚动,但是当没有溢出时我无法初始显示滚动条.我在chrome中试过这个:

#scrollarea-invalid {
overflow-y: scroll !important;
height: 350px;
}

如何在此div中始终显示滚动条,即使内容在此div中小于350px？

Answer 1

body {
  padding: 10px;
}

ul {
  max-height:150px;
  overflow:scroll;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

<ul>
    <li>This is some content</li>
    <li>This is some content</li>
    <li>This is some content</li>
    <li>This is some content</li>
    <li>This is some content</li>
    <li>This is some content</li>
    <li>This is some content</li>
    <li>This is some content</li>
    <li>This is some content</li>
    <li>This is some content</li>
    <li>This is some content</li>
    <li>This is some content</li>
</ul>

Answer 2

只是让滚动条可见将不允许您对尝试向下滚动的用户做出反应.因此,您需要实际将内容流转移到该区域之外并检测滚动.试试这个 :

#scrollarea-invalid {
overflow-y: scroll;
height: 350px;
}
#scrollarea-content{
  min-height:101%;
}

<div id='scrollarea-invalid'>
  <div id='scrollarea-content'></div>
</div>

Answer 3

overflow: auto或者 overflow: scroll 有时不起作用。所以我们必须尝试基于 webkit 的代码来解决这个问题。

尝试以下代码来显示始终显示的滚动条，

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

这将始终在页面上显示垂直和水平滚动条。如果你只需要一个垂直滚动条，那么把overflow-x: hidden