在水平滚动时固定宽度

Question

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

这些是问题的图片;

当我尝试滚动时，这种可怕的视觉效果会出现;

以下是导航栏的CSS代码;

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

由于

Answer 1

尝试添加此CSS

body{
  overflow-x:hidden;
}

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

这是一个显示用例的小提琴

https://jsfiddle.net/12md1fqh/

<强>段

＆＃13;

＆＃13;

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;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;