水平滾動時的固定寬度

Question

我有導航欄和材質設計主題，但存在滾動水平時無法處理的問題。

這些是問題的圖片;

當我嘗試水平滾動時，這可怕的視覺出來;

這裏是導航欄的CSS代碼;

我創建的紅圈就是問題所在。我想要的是，當我滾動水平時，該導航欄應保持固定而不滾動。這可能嗎？

感謝

Answer 1

嘗試加入這個CSS

body{ 
    overflow-x:hidden; 
} 

.body-of-content{ 
    overflow-x:auto; 
    max-width:100%; 
} 

下面是一個小提琴顯示一個用例

https://jsfiddle.net/12md1fqh/

代碼片段

body{ 
 
    overflow-x:hidden; 
 
} 
 
.header{ 
 
    width:100%; 
 
    height:50px; 
 
    background-color: black; 
 
    color:white; 
 
    text-align:center; 
 
    font-size:2em; 
 
} 
 
.data{ 
 
    width:200%; 
 
    height:50px; 
 
    background-color: #eee; 
 
} 
 

 
.body-of-content{ 
 
    max-width:100%; 
 
    height:500px; 
 
    background-color: green; 
 
    overflow-x:auto; 
 
}

<div class="header"> 
 
    Header 
 
</div> 
 

 
<div class="body-of-content"> 
 
<div class="data"> 
 
I am scrollllllllllllllllllllllllllllllllllllableeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee !! 
 
</div> 
 
</div>