html - 在移动设备中将滚动方向修改为水平

Question

我有一个包含多个部分的网页，每个部分的宽度为 100%，视口高度为 100。我还为它们中的每一个设置了滚动快照。滚动快照从上到下发生，但是在移动版本上，我希望将内容的方向设置为水平，以便用户从左到右滚动。

有没有办法用媒体查询做到这一点？

在桌面

 ------
| 100vh|
| 100vw|
|      |
|   ↓  |
 ------
 Scrollsnap
 ------
| 100vh|
|100vw |
|      |
|   ↓  |
 ------
 Scrollsnap
 ------
|100vh |
|100vw |
|      |
|   ↓  |
 ------     

在移动

 ------            ------            ------    
|100vh |          |100vh |          |100vh |
|100vw |          |100vw |          |100vw |
|      |Scrollsnap|      |Scrollsnap|      |
|   →  |      →   |   →  |     →    |  →   |
|      |          |      |          |      |
 ------            ------            ------
 

编辑 ：

感谢您对 scrollsnap X 的回答，但是我想知道如何在移动设备上并排制作所有部分。滚动捕捉只是为了添加一些上下文

这是我的代码的codepen。每个部分都是视频，所以在这里发布很多代码https://codepen.io/knudsem/pen/LYZqwdo

Answer 1

是的，您可以在移动设备上将x-mandatoryorx-proximity属性添加到正文中。

@media screen and (max-width: 480px) {
    body {
        scroll-snap-type: x mandatory; // or x-proximity, whichever you prefer
    }

    section {
        height: 100vh;
        width: 100vw;
        scroll-snap-align: start;
    }
}