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

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/

我做了侧NAV固定主要内容绝对。侧导航的高度现在是100％，占据了屏幕的20％，而主要内容将占用80％。