Question

我写了以下代码。

该代码希望在左右两侧都显示滚动条。

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

W3C规范中是否提到了此行为？
如何左右滚动？

body {
  overflow: auto;
}

.box1 {
  position: absolute;
  height: 100px;
  width: 100px;
  left: -50px;
  background-color: red;
}

.box2 {
  position: absolute;
  height: 100px;
  width: 100px;
  right: -50px;
  background-color: blue;
}

<div class="box1"></div>
<div class="box2"></div>

谢谢。

Answer 1

就像其他评论所说，“设计上”隐藏了左溢，但是...

您可以做的是将左侧元素保留在位置left: 0;，然后在计算实际视口宽度之后，用right: -100px;将您的右侧元素移出视口。以及可滚动区域的宽度，并使用公式(scrollWidth - viewWidth) / 2自动定位水平滚动条。

您可以通过运行以下代码段查看结果。

// get view port width
const viewWidth = document.documentElement.clientWidth;
// get scroll width
const scrollWidth = document.documentElement.scrollWidth;
// position horizontal scroll
document.documentElement.scrollLeft = (scrollWidth - viewWidth) / 2;

body {
  overflow: auto;
}

.box1 {
  position: absolute;
  height: 100px;
  width: 100px;
  left: 0; /* modified value from -50px to 0 */
  background-color: red;
}

.box2 {
  position: absolute;
  height: 100px;
  width: 100px;
  right: -100px; /* modified value from -50px to -100px */
  background-color: blue;
}

<div class="box1"></div>
<div class="box2"></div>

如何也向左显示滚动条？

1 个答案: