如何用CSS设置默认滚动条的起止位置及添加外边距？

一、设置滚动容器的默认滚动位置 #

先明确一点：纯CSS没办法直接控制滚动容器的初始滚动位置，这部分需要结合JavaScript来实现。如果是想让容器默认滚动到某个锚点元素，倒是可以用CSS的scroll-margin配合锚点，但如果是直接控制滚动到顶部/底部或者指定偏移量，JS是更直接的方式。

示例1：默认滚动到底部

针对你给出的HTML结构，我给容器加了固定高度（不然容器会自适应内容高度，没法触发滚动），然后在页面加载完成后让它自动滚动到底部：

<html>
<head>
  <script>
    window.addEventListener('load', function() {
      const scrollContainer = document.querySelector('.ScrollContent');
      // 直接滚动到容器最底部
      scrollContainer.scrollTop = scrollContainer.scrollHeight;
      // 想要平滑滚动的话，换成这个写法：
      // scrollContainer.scrollTo({
      //   top: scrollContainer.scrollHeight,
      //   behavior: 'smooth'
      // });
    });
  </script>
</head>
<body>
  <div class="ScrollContent" style="overflow-y: scroll; height: 200px;">
    <div class="overflow" style="height: 250px;">
      <div>Content</div>
      <div>Content</div>
      <!-- ... 你的其他内容 ... -->
      <div>最后一条内容</div>
    </div>
  </div>
</body>
</html>

示例2：默认滚动到指定偏移位置

如果想让容器默认滚动到距离顶部50px的位置，只需要修改scrollTop的值：

scrollContainer.scrollTop = 50; // 直接设置滚动偏移量

二、给滚动条添加外边距 #

给滚动条加外边距可以通过自定义滚动条样式实现，不同浏览器语法略有差异，下面给出通用的WebKit内核（Chrome、Safari等）方案，以及Firefox的兼容写法：

完整样式示例

.ScrollContent {
  overflow-y: scroll;
  height: 200px;
  /* 给容器右侧加内边距，为滚动条预留空间 */
  padding-right: 8px;
  /* Firefox下设置滚动条宽度 */
  scrollbar-width: thin;
}

/* WebKit内核浏览器自定义滚动条 */
.ScrollContent::-webkit-scrollbar {
  width: 6px; /* 设置滚动条宽度 */
  margin-right: 4px; /* 滚动条右侧的外边距 */
}

.ScrollContent::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px; /* 轨道圆角 */
}

.ScrollContent::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px; /* 滑块圆角 */
}

.ScrollContent::-webkit-scrollbar-thumb:hover {
  background: #555; /* hover状态的滑块颜色 */
}

这样设置后，滚动条会和容器右侧边缘保持一段间距，完美实现“外边距”效果。Firefox下因为滚动条会渲染在容器的padding区域内，所以padding-right就能直接让滚动条和内容区拉开距离。

内容的提问来源于stack exchange，提问作者NiceCodeBro