滚动时的水平布局

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. 滚动时，按比例滚动

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>

Answer 2

使用纯 CSS，我们可以创建一个包含容器内项目的容器。然后将容器逆时针旋转 90 度，将物品顺时针旋转 90 度以正确向上。

.horizontal{
  position:absolute;
  top:0;
  left:0;
  width: 200px;
  height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  transform: rotate(-90deg);
  transform-origin: right top;
}

.horizontal > div {
  width: 150px;
  height: 150px;
  transform: rotate(90deg);
  transform-origin: right top;
  background: green;
  border: 1px solid black;
}

<div class="horizontal">

  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
 
</div>