Как я могу отображать полосы прокрутки в левом направлении тоже?

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>