滚动时的水平布局

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高度为1600px (400 * 4)，这意味着我们需要有1200px来滚动（前 400px 已经呈现）。但是，由于body.height是800px，因此我们只有800ox可以滚动。

我的建议是计算有点不同

1. 将body高度设置为section.length * section.height
2. 获取窗口比例（宽度/高度）
3. 滚动时，按照比例滚动

body.height: 800
body.width: 400

演示

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;
}