Css 如何在左侧方向也显示滚动条？

我编写了以下代码

此代码希望在左右两侧显示滚动条

但是，实际上您只能向右滚动

• W3C规范中提到过这种行为吗
• 我怎样才能左右滚动

正文{
溢出：自动；
}
.box1{
位置：绝对位置；
高度：100px；
宽度：100px；
左：-50px；
背景色：红色；
}
.box2{
位置：绝对位置；
高度：100px；
宽度：100px；
右：-50px；
背景颜色：蓝色；
}

---

像其他评论所说的那样，“设计”隐藏了左溢出，但

您可以做的是将left元素保留在位置

left:0然后使用
right:-100px将右侧元素定位到视图端口之外
之后，您需要计算实际视图端口的宽度和可滚动区域的宽度，并使用公式
（scrollWidth-viewWidth）/2
自动定位水平滚动条

运行下面的代码段可以看到结果


//获取视图端口宽度
const viewWidth=document.documentElement.clientWidth；
//获取滚动宽度
常量scrollWidth=document.documentElement.scrollWidth；
//位置水平滚动
document.documentElement.scrollLeft=（scrollWidth-viewWidth）/2
正文{
溢出：自动；
}
.box1{
位置：绝对位置；
高度：100px；
宽度：100px；
左：0；/*将值从-50px修改为0*/
背景色：红色；
}
.box2{
位置：绝对位置；
高度：100px；
宽度：100px；
右：-100px；/*将值从-50px修改为-100px*/
背景颜色：蓝色；
}

是的，这是bydesign，您只能向右滚动。。左边的任何溢出都是丢失的，您不能。滚动条的位置/方向取决于文档的语言方向（rtl/ltr）。从相反方向溢出的内容是隐藏的，不会创建滚动条。但溢出可以通过其他几种方式处理；）好的，我明白了。那么，当你想做这样的事情时，你会用什么方法？即使使用JavaScript，也不能实现吗？