Переполнение влево / вверх с помощью полос прокрутки

Question

Я позиционирую свой элемент внутри контейнера, используя свойство transform: tranxlate(x, y) css.

Когда я перемещаю элемент вправо или вниз - появляются полосы прокрутки, потому что контейнер имеет overflow: auto;. Однако, если я перемещаю элемент влево или вверх - очевидно, полосы прокрутки не появляются, потому что переполнение не работает таким образом.

Теперь я ищу какой-то минималистичный c подход с чистым html / js / css чтобы иметь возможность прокручивать контейнер, имея в виду, что внутреннее содержимое может быть перемещено случайным образом в любую сторону.

Короче говоря, я хочу, чтобы полоса прокрутки появлялась, если желтый блок выходит за левый край, так же, как он выглядит когда он идет к правому краю?

Вот пример Codepen , который показывает проблему.

var btns = document.querySelectorAll('button');
var inner = document.querySelector('.inner');
var offset = 0;

btns[0].addEventListener('click', function() {
  offset -= 25;
  inner.style.transform = `translate(${offset}px, 0px)`;
});

btns[1].addEventListener('click', function() {
  offset += 25;
  inner.style.transform = `translate(${offset}px, 0px)`;
});

button {
  margin: 0 auto;
  display: block;
}

.outer {
  outline: 1px dashed black;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  overflow: auto;
}

.inner {
  width: 100px;
  height: 100px;
  background: yellow;
}

<button>Move Left</button>
<button>Move Right</button>

<div class="outer">
  <div class="inner"></div>
</div>

Answer 1

Может быть, это поможет ... учтите, что прокрутка смещения не может быть отрицательной; Вы можете только go от 0 до бесконечности (я думаю, LOL); затем вы можете перемещать свой элемент через левое и верхнее отрицательные значения, но это не позволяет вам прокручивать до. Таким образом, вы можете увеличивать ширину и высоту в зависимости от требований пользователя и прокручивать то же значение в обратном направлении перемещения пользователя, это покажет эффект, что прокрутка может go эти позиции, которые сейчас недоступны (отрицательные прокрутки ). Когда вы go вернетесь назад, вы должны повернуть реверс для увеличения, а когда увеличение будет равно нулю, вы будете перемещать свой элемент по мере необходимости.

Я ожидаю, что мое объяснение было успешным; извините за мой английский sh ...

"use strcit";

var blank, container, yblock;

function bLeft() {
  if (yblock.offsetLeft <= 0) {
    blank.style.width = blank.offsetWidth + 16 + 'px';
    container.scrollTo(container.scrollLeft + 16, container.scrollTop);
  } else {
    yblock.style.left = `${yblock.offsetLeft - 16}px`;
  }
}

function bRight() {
  if (blank.offsetWidth > container.offsetWidth) {
    blank.style.width = blank.offsetWidth - 16 + 'px';
  } else {
    yblock.style.left = `${yblock.offsetLeft + 16}px`;
  }
}

function bUp() {
  if (yblock.offsetTop <= 0) {
    blank.style.height = blank.offsetHeight + 16 + 'px';
    container.scrollTo(container.scrollLeft, container.scrollTop + 16);
  } else {
    yblock.style.top = `${yblock.offsetTop - 16}px`;
  }
}

function bDown() {
  if (blank.offsetHeight > container.offsetHeight) {
    blank.style.height = blank.offsetHeight - 16 + 'px';
  } else {
    yblock.style.top = `${yblock.offsetTop + 16}px`;
  }
}

window.addEventListener("load", function() {
  blank = document.getElementById("blank");
  container = document.getElementById("container");
  yblock = document.getElementById("y-block");
  document.getElementById("left").addEventListener("click", bLeft);
  document.getElementById("right").addEventListener("click", bRight);
  document.getElementById("up").addEventListener("click", bUp);
  document.getElementById("down").addEventListener("click", bDown);
});

.container {
  position: relative;
  width: 20em;
  height: 20em;
  border: dashed 0.2em black;
  overflow: auto;
}

.blank {
  position: absolute;
  width: 100%;
  height: 100%;
}

.y-block {
  position: absolute;
  background-color: yellow;
  width: 3em;
  height: 3em;
}

<div class="container" id="container">
  <div class="blank" id="blank">
    <div class="y-block" id="y-block"></div>
  </div>
</div>
<div>
  <input type="button" value="left" id="left">
  <input type="button" value="right" id="right">
  <input type="button" value="down" id="down">
  <input type="button" value="up" id="up">
</div>

Answer 2

Вместо перемещения объекта влево или вверх увеличьте высоту / ширину родительского контейнера, если эти свойства go ниже 0, и прокрутите окно по смещению.

Это создаст вид объект движется с холста, в то же время предоставляя полосы прокрутки, однако объект никогда не выходит за пределы (0,0)

Answer 3

Вот краткий пример того, как вы можете добиться горизонтальной прокрутки контейнера, перемещая желтое поле.

 var btns = document.querySelectorAll('button');
        var inner = document.querySelector('.inner');
        var outer = document.querySelector('.outer');
        var offset = 0;
        
        btns[0].addEventListener('click', function() {
            offset -= 25;
            inner.style.transform = `translate(${offset}px, 0px)`;
            outer.scroll({
                left: outer.scrollLeft -= 25
            });
        });
        
        btns[1].addEventListener('click', function() {
            offset += 25;
            inner.style.transform = `translate(${offset}px, 0px)`;
            outer.scroll({
                left: outer.scrollLeft += 25
            });
        });

button {
    margin: 0 auto;
    display: block;
  }
  
  .outer {
    outline: 1px dashed black;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    overflow: auto;
  }
  
  .inner {
    width: 100px;
    height: 100px;
    background: yellow;
  }

    <button>Move Left</button>
    <button>Move Right</button>
    
    <div class="outer">
        <div class="inner"></div>
    </div>