javascript - 滚动时的水平布局

Question

我想在我的页面中有一个水平布局......每当用户滚动页面而不是从上到下
布局我想要从左到右的布局
...我的代码在大屏幕上，在最后一节之后和小屏幕上都有空白空间
最后一节不会出现。

calcBodyHeight();

function calcBodyHeight() {
  const sections = document.querySelectorAll('.section');
  let height = null;
  sections.forEach(section => {
    height += section.offsetWidth;
  })
  document.body.style.height = `${height}px`;
}
const container = document.querySelector('.container');
window.addEventListener('scroll', e => {
  const scroll = window.scrollY;
  container.style.left = `-${scroll}px`;
});

html,
body {
  height: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
}

.container {
  width: fit-content;
  height: 100vh;
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
}

.container .section {
  width: 100vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .section:nth-child(1) {
  background-color: cornflowerblue;
}

.container .section:nth-child(2) {
  background-color: coral;
}

.container .section:nth-child(3) {
  background-color: lightgreen;
}

.container .section:nth-child(4) {
  background-color: teal;
}

<div class="container">
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>

Answer 1

问题是计算中缺少初始高度。
举个例子:

body.height: 800
body.width: 400

之后 calcBodyHeight , body高度为 1600像素 (400 * 4) 这意味着我们需要 1200像素滚动(第一个 400px 已经呈现)。但是，由于 body.height是 800像素我们只剩下 800牛滚动。
我的建议是计算有点不同

设置body高度为 section.length * section.height

获取窗口比例(宽/高)

滚动时，按比例滚动

calcBodyHeight();
function calcBodyHeight() {
  const height = [...document.querySelectorAll('.section')]
    .reduce((prev, curr) => prev + curr.offsetHeight, 0);
  document.body.style.height = `${height}px`;
}

const container = document.querySelector('.container');
const ratio = window.innerWidth / window.innerHeight;
window.addEventListener('scroll', e => {
  const scroll = window.scrollY * ratio;
  container.style.left = `-${scroll}px`;
});

演示

calcBodyHeight();
function calcBodyHeight() {
  const height = [...document.querySelectorAll('.section')]
    .reduce((prev, curr) => prev + curr.offsetHeight, 0);
  document.body.style.height = `${height}px`;
}

const container = document.querySelector('.container');
const ratio = window.innerWidth / window.innerHeight;
window.addEventListener('scroll', e => {
  const scroll = window.scrollY * ratio;
  container.style.left = `-${scroll}px`;
});

html,
body {
  height: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
}

.container {
  width: fit-content;
  height: 100vh;
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
}

.container .section {
  width: 100vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .section:nth-child(1) {
  background-color: cornflowerblue;
}

.container .section:nth-child(2) {
  background-color: coral;
}

.container .section:nth-child(3) {
  background-color: lightgreen;
}

.container .section:nth-child(4) {
  background-color: teal;
}

<div class="container">
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>