滚动条在溢出时自动隐藏不起作用

Question

我正在尝试实现一个基本布局，其中标题固定在顶部，主要内容区域包含内容和侧边栏。侧边栏始终固定在左侧，并且布局以内容区域和侧边栏独立滚动的方式工作。我设置了overflow-y:auto，这样只要内容溢出，滚动条就会出现。我面临以下问题：

1. 滚动条不会自动隐藏。理想情况下，在大多数浏览器中，即使内容溢出，当鼠标不在 div 上方时，滚动条也会隐藏。 （例如：http://materializecss.com/。如果您展开侧边栏上的菜单项并将鼠标从侧边栏移开，滚动条将隐藏）

2. 屏幕上有 3 个滚动条。如果侧边栏内容没有溢出，则最右侧的滚动条（完整的页面滚动条）接管并将侧边栏内容移动到标题下方。我不希望这种情况发生。侧边栏内容不应位于标题下方。

我做错了什么？能否请你帮忙？

header {
  background: pink;
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 60px;
}

.main {
  display: flex;
  height: 100vh;
  padding-top: 60px;
}
.main .content-area {
  flex: 1 auto;
  overflow-y: auto;
  padding: 5px;
}
.main .sidenav {
  flex: 0 0 auto;
  order: -1;
  overflow-y: auto;
  overflow-x: hidden;
  width: 200px;
  border-right: 1px solid;
}

<header class="main-nav">
  Header
</header>
<main class="main">
  <div class="content-area">
    Content Area.
    Lorem ipsum dolor sit amet, ludus voluptaria intellegebat has an, vis movet sententiae te. Ex iisque referrentur vis, mei id dolorum erroribus. Eros erant at pri. Nam eu falli nostrum invenire, quo mundi feugait complectitur ei. Nec elitr soleat ea, quo in tantas percipit corrumpit.

Duo graecis facilisi partiendo id, commune omnesque cu his, at vim tacimates interpretaris. Ut oporteat quaestio sea. Eos eu lorem tation perpetua, nec et solum senserit. Ei diceret delenit suscipit per. Inani labore no qui.

Eos wisi altera id. Possim sensibus est et, at oblique sanctus adolescens eos. Wisi commodo est cu. Regione patrioque percipitur vim eu, facer vocent vituperatoribus pri cu. Delenit similique his ei, ne eros scripta accusata cum, meis quaerendum vituperatoribus vis no. No elitr facilisi corrumpit his.

Eos ut semper reprimique consequuntur, mea cu percipit efficiendi. No possit graeco noluisse ius, ea quis justo facer vix, pri cibo verear fuisset id. Omittam liberavisse pro id, expetenda conclusionemque pro ut. Ludus forensibus eu vis, mundi moderatius ad qui. Expetenda accusamus vis an, an feugiat invenire recteque vim. Ceteros adipiscing adversarium ne usu.

Sale deleniti ad pri, no eos reque voluptua. Debet verterem eu vix, percipit posidonium ut nec. Ad aperiam repudiandae mei, sed no utroque fastidii, facilisi forensibus sit id. Case nonumy ne nec, vide vulputate adipiscing sed ex, pro solum facer maiorum in. Te exerci scripta electram vim, melius vocibus honestatis ne pro. Atqui adversarium pri ut
.
Lorem ipsum dolor sit amet, ludus voluptaria intellegebat has an, vis movet sententiae te. Ex iisque referrentur vis, mei id dolorum erroribus. Eros erant at pri. Nam eu falli nostrum invenire, quo mundi feugait complectitur ei. Nec elitr soleat ea, quo in tantas percipit corrumpit.

Duo graecis facilisi partiendo id, commune omnesque cu his, at vim tacimates interpretaris. Ut oporteat quaestio sea. Eos eu lorem tation perpetua, nec et solum senserit. Ei diceret delenit suscipit per. Inani labore no qui.

Eos wisi altera id. Possim sensibus est et, at oblique sanctus adolescens eos. Wisi commodo est cu. Regione patrioque percipitur vim eu, facer vocent vituperatoribus pri cu. Delenit similique his ei, ne eros scripta accusata cum, meis quaerendum vituperatoribus vis no. No elitr facilisi corrumpit his.

Eos ut semper reprimique consequuntur, mea cu percipit efficiendi. No possit graeco noluisse ius, ea quis justo facer vix, pri cibo verear fuisset id. Omittam liberavisse pro id, expetenda conclusionemque pro ut. Ludus forensibus eu vis, mundi moderatius ad qui. Expetenda accusamus vis an, an feugiat invenire recteque vim. Ceteros adipiscing adversarium ne usu.

Sale deleniti ad pri, no eos reque voluptua. Debet verterem eu vix, percipit posidonium ut nec. Ad aperiam repudiandae mei, sed no utroque fastidii, facilisi forensibus sit id. Case nonumy ne nec, vide vulputate adipiscing sed ex, pro solum facer maiorum in. Te exerci scripta electram vim, melius vocibus honestatis ne pro. Atqui adversarium pri ut.

Lorem ipsum dolor sit amet, ludus voluptaria intellegebat has an, vis movet sententiae te. Ex iisque referrentur vis, mei id dolorum erroribus. Eros erant at pri. Nam eu falli nostrum invenire, quo mundi feugait complectitur ei. Nec elitr soleat ea, quo in tantas percipit corrumpit.

Duo graecis facilisi partiendo id, commune omnesque cu his, at vim tacimates interpretaris. Ut oporteat quaestio sea. Eos eu lorem tation perpetua, nec et solum senserit. Ei diceret delenit suscipit per. Inani labore no qui.

Eos wisi altera id. Possim sensibus est et, at oblique sanctus adolescens eos. Wisi commodo est cu. Regione patrioque percipitur vim eu, facer vocent vituperatoribus pri cu. Delenit similique his ei, ne eros scripta accusata cum, meis quaerendum vituperatoribus vis no. No elitr facilisi corrumpit his.

Eos ut semper reprimique consequuntur, mea cu percipit efficiendi. No possit graeco noluisse ius, ea quis justo facer vix, pri cibo verear fuisset id. Omittam liberavisse pro id, expetenda conclusionemque pro ut. Ludus forensibus eu vis, mundi moderatius ad qui. Expetenda accusamus vis an, an feugiat invenire recteque vim. Ceteros adipiscing adversarium ne usu.

Sale deleniti ad pri, no eos reque voluptua. Debet verterem eu vix, percipit posidonium ut nec. Ad aperiam repudiandae mei, sed no utroque fastidii, facilisi forensibus sit id. Case nonumy ne nec, vide vulputate adipiscing sed ex, pro solum facer maiorum in. Te exerci scripta electram vim, melius vocibus honestatis ne pro. Atqui adversarium pri ut.
  </div>
  <nav class="sidenav">
    <ul>
      <li><a>1</a></li>
      <li><a>2</a></li>
      <li><a>3</a></li>
      <li><a>4</a></li>
      <li><a>5</a></li>
      <li><a>6</a></li>
      <li><a>1</a></li>
      <li><a>2</a></li>
      <li><a>3</a></li>
      <li><a>4</a></li>
      <li><a>5</a></li>
      <li><a>6</a></li>
      <li><a>1</a></li>
      <li><a>2</a></li>
      <li><a>3</a></li>
      <li><a>4</a></li>
      <li><a>5</a></li>
      <li><a>6</a></li>
      <li><a>1</a></li>
      <li><a>2</a></li>
      <li><a>3</a></li>
      <li><a>4</a></li>
      <li><a>5</a></li>
      <li><a>6</a></li>
      <li><a>1</a></li>
      <li><a>2</a></li>
      <li><a>3</a></li>
      <li><a>4</a></li>
      <li><a>5</a></li>
      <li><a>6</a></li>
      <li><a>1</a></li>
      <li><a>2</a></li>
      <li><a>3</a></li>
      <li><a>4</a></li>
      <li><a>5</a></li>
      <li><a>6</a></li>
    </ul>
  </nav>
</main>

Answer 1

在您链接到的网站上，当您不将鼠标悬停在它上面时，只有导航滚动条会消失。不是主要内容。有时最好将滚动条放在主要内容上，这样人们就可以知道他们在网站上的位置。

无论如何...要在鼠标不在 div 中时使滚动条消失，请添加以下 css：

.scrollbox {
  width: 10em;
  height: 50x;
  overflow: auto;
  visibility: hidden;
}
.scrollbox-content,
.scrollbox:hover {
  visibility: visible;
}

我还为你的导航添加了一个最大高度，所以当它变得太高时，滚轮就会出现。

.main .sidenav {
  flex: 0 0 auto;
  order: -1;
  overflow-y: auto;
  overflow-x: hidden;
  width: 200px;
  border-right: 1px solid;
  height:300px; /* <-- Change to what height you want the scroll wheel to appear */
}

这是一个有效的小提琴：https://jsfiddle.net/GeeShepherd/bLLfxrse/7/

编辑：

这是一个更新的小提琴，您的侧导航不会在标题下方：https://jsfiddle.net/GeeShepherd/e39d184b/7/

我将侧导航固定，将主要内容设为绝对。侧边导航的高度现在是 100%，占屏幕的 20%，而主要内容将占 80%。