javascript - 全屏部分由 translateX 更改

Question

我会获得如下效果:我可以通过 translateX 更改的全屏部分(从左到右)。

不幸的是，我第一次尝试移动整个包装器而不是它的内容: https://codepen.io/anon/pen/WPzBYm

const sectionsWrapper = document.getElementById("sections-wrapper");

sectionsWrapper.style.transform = "translateX(-100px)";

html, body {
  background-color: pink;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
}
.wrapper {
  position: relative;
  overflow: auto;
  white-space: nowrap;
  width: 100%;
  height: 100%;      
}
.section {
  display: inline-block;
  width: 100%;
  height: 100vh;
}
.s1 {
  background-color: yellow;
}
.s2 {
  background-color: coral;
}
.s3 {
  background-color: cyan;
}

<div id="sections-wrapper" class="wrapper">
  <div class="section s1">elo1</div>
  <div class="section s2">elo2</div>
  <div class="section s3">elo3</div>
</div>

目标效果:

Answer 1

我不确定你的目标是什么，但如果你想滚动你的部分试试这个代码:

animate 的原始代码(在 vanilla javascript 中)在这里:StackOverflow

//const sectionsWrapper = document.getElementById("sections-wrapper");

//sectionsWrapper.style.transform = "translateX(-100px)";



function animate(elem, style, unit, from, to, time, prop) {
    if (!elem) {
        return;
    }
    var start = new Date().getTime(),
        timer = setInterval(function () {
            var step = Math.min(1, (new Date().getTime() - start) / time);
            if (prop) {
                elem[style] = (from + step * (to - from))+unit;
            } else {
                elem.style[style] = (from + step * (to - from))+unit;
            }
            if (step === 1) {
                clearInterval(timer);
            }
        }, 25);
    if (prop) {
          elem[style] = from+unit;
    } else {
          elem.style[style] = from+unit;
    }
}

window.onload = function () {
    var wrapper = document.getElementById("sections-wrapper");
    var s2 = document.getElementById("s2");
    animate(wrapper, "scrollLeft", "", 0, s2.offsetLeft, 1000, true);
};

html, body{
  background-color: pink;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
}

.wrapper{
  position: relative;
  overflow: auto;
  white-space: nowrap;
  width: 100%;
  height: 100%;
/*   overflow: hidden; */
  
}

.section{
  display: inline-block;
  width: 100%;
  height: 100vh;
}

.s1{
  background-color: yellow;
}

.s2{
  background-color: coral;
}

.s3{
  background-color: cyan;
}

<div id="sections-wrapper" class="wrapper">
  <div id="s1" class="section s1">elo1</div>
  <div id="s2" class="section s2">elo2</div>
  <div id="s3" class="section s3">elo3</div>
</div>

希望这对您有所帮助。