Question

我正在尝试实现一个基本布局，标题固定在顶部，主内容区域包含内容和侧边栏。侧边栏始终贴在左侧，布局的工作方式使内容区域和侧边栏独立滚动。我已设置overflow-y:auto，以便每当内容溢出时都会显示滚动条。我面临以下问题：

滚动条不会自动隐藏。理想情况下，在大多数浏览器中，即使内容溢出，当鼠标悬停在div上时，滚动条也会隐藏。（例如：http://materializecss.com/。如果展开侧栏上的菜单项并将鼠标从侧栏移开，则滚动条会隐藏）
屏幕上有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％。

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

1 个答案: