CSS:水平滚动(overflow-x: scroll)不工作

Question

我有3个"然后横向滚动。我已经设法创建了一个水平滚动条BUT当我向上/向下滚动我的鼠标滚轮什么也没发生

这是我的容器的样子:

body .container {
width: 100%;
height: 100%;
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}

完整HTML + CSS:

body {
width: 100vw;
height: 100vh;
margin: 0;
}
body .container {
width: 100%;
height: 100%;
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
body .container section {
flex: none;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
scroll-snap-align: start;
}
body .container section:nth-of-type(1) {
background-color: rgb(33, 59, 27);
color: green;
}
body .container section:nth-of-type(2) {
background-color: rgb(45, 42, 39);
color: rgb(182, 216, 182);
}
body .container section:nth-of-type(3) {
background-color: rgb(52, 41, 33);
color: rgb(87, 33, 233);
}
body .container section h1 {
font-family: "Courier New", Courier, monospace;
font-size: 10em;
}
body .container section p {
font-size: 12px;
}

<!-- main wrapper of the content for the whole webpage -->
<div class="container">
<!-- sections of the web page -->
<section>
<h1>Page1</h1>
<p>random text</p>
</section>
<section>
<h1>Page2</h1>
</section>
<section>
<h1>Page3</h1>
</section>
</div>

我试着谷歌，但没有找到任何解决方案…这些都是我从youtube上的教程学来的。

Answer 1

你需要在这里使用一点javascript你必须从容器中删除width和height属性

const scrollContainer = document.querySelector(".container");
scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
});

body {
width: 100vw;
height: 100vh;
margin: 0;
}

body .container {
overflow-x: scroll;
display: flex;
}
body .container section {
flex: none;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
scroll-snap-align: start;
}
body .container section:nth-of-type(1) {
background-color: rgb(33, 59, 27);
color: green;
}
body .container section:nth-of-type(2) {
background-color: rgb(45, 42, 39);
color: rgb(182, 216, 182);
}
body .container section:nth-of-type(3) {
background-color: rgb(52, 41, 33);
color: rgb(87, 33, 233);
}
body .container section h1 {
font-family: "Courier New", Courier, monospace;
font-size: 10em;
}
body .container section p {
font-size: 12px;
}

<!-- main wrapper of the content for the whole webpage -->
<div class="container">
<!-- sections of the web page -->
<section>
<h1>Page1</h1>
<p>random text</p>
</section>
<section>
<h1>Page2</h1>
</section>
<section>
<h1>Page3</h1>
</section>
</div>