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是 800像素，因此只剩下 800ox 即可滚动。

我的建议是计算出一些差异

将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>

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>

滚动时的水平布局

2 个答案: