Javascript 容器中具有固定大小的水平滚动条

我有一个固定大小的容器，有一个较宽的子容器

我不想滚动整个文档。我只想在x轴中滚动子对象

.banner{
背景颜色：蓝色；
宽度：100%；
高度：300px；
填充：20px；
}
.内容{
背景色：红色；
边界半径：25px；
宽度：200%；
身高：100%；
}

---

在

正文

上使用CSS

溢出：隐藏

属性，因此“整个文档”不可x-滚动，并在

横幅

上设置

溢出-x:滚动

，使其可x-滚动：

正文{
溢出x：隐藏；
}
.横幅{
背景颜色：蓝色；
宽度：100%；
高度：300px；
填充：20px；
溢出-x：滚动；
}
.内容{
背景色：红色；
边界半径：25px；
宽度：200%；
身高：100%；
}

与水平滚动条分开的一段文本

这方面存在一些问题。在这种情况下，应该不需要在正文上设置溢出隐藏，因为任何元素都不应从正文中溢出（而且实际上隐藏正文溢出并不是一个特别好的主意，因为它可能会弄乱文档的其余部分）。你所做的是隐藏一个问题，而不是修复它。这意味着您看不到蓝色和红色元素的结尾，因为它们当前从主体中溢出。另外，我假设红色div的右侧应该有空格，就像它的左侧一样，这在当前的实现中是不可能发生的。