CSS 問題:水平滾動(overflow-x:scroll)不起作用
P粉295616170
P粉295616170 2024-03-29 16:06:18
0
1
389

我有 3 個“頁面”,想要水平滾動它們。 我已經成功創建了一個水平滾動條,但是當我用滑鼠滾輪向上/向下滾動時什麼也沒有發生。

這就是我的容器的樣子:

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>

我嘗試 Google 但沒有找到任何解決方案...我從 YouTube 教程中獲得了所有這些內容。

P粉295616170
P粉295616170

全部回覆(1)
P粉621033928

這裡需要使用一些 JavaScript,並且必須從容器中刪除寬度和高度屬性

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

Page1

random text

Page2

Page3

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!