html - 水平滚动时固定宽度

Question

我有一个导航栏和 Material 设计主题，但是水平滚动时我无法处理这样的问题。

这些是问题的图片；

当我尝试水平滚动时，会出现这种糟糕的视觉效果；

这是导航栏的CSS代码；

我创建的红色圆圈就是问题所在。我想要的是当我水平滚动时，导航栏应该保持固定而不是滚动。这可能吗？

谢谢

Answer 1

尝试添加这个 CSS

body{
  overflow-x:hidden;
}

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

这是一个显示用例的 fiddle

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>