我有 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 教程中獲得了所有這些內容。
這裡需要使用一些 JavaScript,並且必須從容器中刪除寬度和高度屬性