带有滚动条的左/上溢出

Question

我正在使用transform: tranxlate(x, y) css 属性将我的元素定位在容器内。

当我将元素移动到右侧或底部时 - 出现滚动条是因为容器有 overflow: auto;。但是，如果我将元素移动到左侧或顶部 - 显然滚动条不会出现，因为溢出不起作用。

现在我正在寻找一些带有纯 html/js/css 的简约方法，以便能够滚动容器，记住内部内容可能会随机移动到任何一侧。

简而言之，如果黄色块超出左边缘，我希望滚动条出现，就像它在右边缘出现时一样？

这是一个Codepen example，它显示了问题。

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

也许这有帮助...考虑到偏移滚动不能为负数；你只能从 0 到无穷大（我想哈哈）；然后，您可以通过 left 和 top 负值移动元素，但它不允许您滚动到。因此，您可以根据用户要求增加宽度和高度，并将相同的值滚动到用户移动的反方向，这将显示滚动能够进入这些现在不可用的位置（负滚动）的效果。当您返回时，您必须反转增强，当增强为空时，您可以根据需要移动元素。

我希望我的解释是成功的；请原谅我的英语...

"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

这是一个快速示例，说明如何在移动黄色框的同时实现容器水平滚动。

 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>

Answer 3

不要向左或向上移动对象，而是在这些属性低于 0 时增加父容器的高度/宽度，并将窗口滚动偏移量。

这将使对象看起来从画布上移开，同时为您提供滚动条，但该对象实际上从未超出 (0,0)