滾動條自動隱藏在溢出不起作用

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％。