全屏显示部分由translationX更改

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

我不确定您的目标是什么，但是如果您要滚动各节，请尝试以下代码：

动画（使用原始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>

希望对您有帮助。

Answer 2

检查此内容。

sectionsWrapper.style.transform = "translateY(200px)";

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

sectionsWrapper.style.transform = "translateY(200px)";