我想有一个水平布局在我的页面。。。每当用户滚动页面，而不是从上到下的布局，我想有从左到右的布局。。。与我的代码在大屏幕上，有空的空间后，最后一节和在小屏幕上，最后一节将不会出现。
null
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;}
/*# sourceMappingURL=style.css.map */<div class="container">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>null
使用纯CSS，我们可以创建一个容器，其中包含容器内的项目。然后逆时针旋转容器90度，顺时针旋转物品90度，以正确的方式向上。
null
.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>