CSS - 溢出：滚动； - 总是显示垂直滚动条？

Question

所以目前我有：

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

但是我不相信对于某些用户来说，那里有更多内容是显而易见的。他们可以向下滚动页面，而不知道我的 div 实际上包含更多内容。我使用高度 510px，这样它会截掉一些文本，因此在某些页面上看起来确实有更多内容，但这并不适用于所有页面。

我使用的是 Mac，在 Chrome 和 Safari 中，只有当鼠标位于 Div 上并且您主动滚动时才会显示垂直滚动条。有没有办法让它一直显示？

Answer 1

我自己刚刚遇到这个问题。 OSx Lion 在不使用时隐藏滚动条，使其看起来更“光滑”，但同时出现了您解决的问题：人们有时无法看到 div 是否具有滚动功能。

修复：在你的CSS中包含 -

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

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

/* always show scrollbars */

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

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


/* css for demo */

#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}

#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}


/* === ignore stuff below, it's just to help with the visual. === */

#container {
  background-color: #ffc;
}

#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}

<div id="container">
  <div id="child">Example</div>
</div>

根据需要自定义外观。 来源

Answer 2

对于 2021 年及以后来到这里的任何人：

“iOS 14 不再支持自定义滚动条。”< /a>

根据developer.apple.com 论坛上的官方“框架工程师”的说法。

Answer 3

请注意，在 iPad Safari 上，如果 CSS 中的某处有 -webkit-overflow-scrolling: touch;，NoviceCoding 的解决方案将不起作用。
解决方案是删除所有出现的 -webkit-overflow-scrolling: touch; 或将 -webkit-overflow-scrolling: auto; 与
新手编码的解决方案。

Answer 4

根据我的测试，这将在 iOS 7.1.x 上的 Safari 上与 iPad 配合使用，但我不确定是否适用于 iOS 6。但是，它不适用于 Firefox。有一个旨在跨浏览器兼容的 jQuery 插件，称为 jScrollPane。

另外，Stack Overflow 上有一个重复的帖子 其中还有一些其他细节。

Answer 5

您只需按一定间隔来回抖动滚动条一个像素:) 已

在 Chrome 和 Firefox for macOS (14.4.1) 上测试并运行。

不适用于具有 One UI (6.1) 的 Android Chrome (14) 第一次交互后。

document.querySelectorAll('.scrollable-container').forEach((container) => {
    function ensureScrollVisible() {
        // Vertical scroll bar
        if (container.scrollTop === 0) {
            container.scrollTop += 1;
            container.scrollTop -= 1;
        } else {
            container.scrollTop -= 1;
            container.scrollTop += 1;
        }

        // Horizontal scroll bar
        if (container.scrollLeft === 0) {
            container.scrollLeft += 1;
            container.scrollLeft -= 1;
        } else {
            container.scrollLeft -= 1;
            container.scrollLeft += 1;
        }
    }

    ensureScrollVisible();
    setInterval(ensureScrollVisible, 250);
});

.scrollable-container {
  width: 100px;
  height: 100px;
  overflow: auto;
  border: 1px solid #e1e4e8;
}

.oversized-content {
  white-space: nowrap;
}

<div class="scrollable-container">
  <div class="oversized-content">
    <ul>
      <li>Sphinx</li>
      <li>of</li>
      <li>black</li>
      <li>quartz,</li>
      <li>judge</li>
      <li>my</li>
      <li>vow</li>
    </ul>
  </div>
</div>

<div class="scrollable-container">
  <div class="oversized-content">
    <p>Sphinx of black quartz, judge my vow</p>
  </div>
</div>

<div class="scrollable-container">
  <div class="oversized-content">
    <ul>
      <li>Sphinx of black quartz, judge my vow</li>
      <li>Sphinx of black quartz, judge my vow</li>
      <li>Sphinx of black quartz, judge my vow</li>
      <li>Sphinx of black quartz, judge my vow</li>
      <li>Sphinx of black quartz, judge my vow</li>
      <li>Sphinx of black quartz, judge my vow</li>
      <li>Sphinx of black quartz, judge my vow</li>
    </ul>
  </div>
</div>