Question

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

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

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

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

只有滚动条可见才会让您对尝试向下滚动的用户做出反应。因此，您需要实际将内容流转移到该区域之外并检测滚动。试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

Answer 4

我的页面上遇到了同样的问题，要浏览videos列表，我们必须在其中滚动。恐怕访问者认为只有一个视频。

使用::-webkit-scrollbar和:::-webkit-scrollbar-thumb是行之有效的解决方案。

Answer 5

SELECT * FROM ( SELECT student_application_id, skill, sum(strength) AS strength FROM student_proficiences GROUP BY student_application_id, skill ) AS gTablo PIVOT(sum(strength) FOR skill IN ( [Statistics], [Excel], [Python], [SQL], [R] )) AS p或 overflow: auto 有时将无法正常工作。因此，我们必须尝试基于Webkit的代码来解决此问题。

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

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); }

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

5 个答案: