如何使滚动条仅在使用时可见？

Question

我想让滚动条仅在用户滚动时可见，就像 Twitch 滚动条一样。以及如何使滚动条从导航栏下方开始？（也像 Twitch 滚动条...）

Answer 1

我不知道什么是“Twitch 滚动条”，但这是我根据您问题中提供的数据做出的回答。我认为滚动条在不使用时隐藏取决于您使用的浏览器。但是后面的问题（从navbar下面开始）我在下面解决了。用您的网站内容替换 Lorem Ipsum 段落。

#navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: lightblue;
}

#pageContent {
  position: absolute;
  top: 50px;
  left: 0;
  width: calc(100% - 10px);
  height: calc(100% - 50px);
  padding-left: 5px;
  padding-right: 5px;
  overflow: scroll;
}

<div id="navbar"></div>
<div id="pageContent">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

如何使滚动条仅在使用时可见？

How can i make scroll bar visible only when used?

css

scrollbar

reactjs