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

Question

我有一个网页，有多个部分，每个部分都有100%的宽度和100%的视口高度。我还为它们中的每一个设置了滚动捕捉。滚动捕捉是从上到下进行的，但在移动版上，我希望内容的方向是水平设置的，这样用户就可以从左向右滚动。

有什么方法可以通过媒体查询做到这一点吗？

在桌面

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

在移动中

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

编辑：

感谢您使用scrollsnap X的回答，不过我想知道如何在手机上并排制作机身中的所有部分。滚动快照只是添加一些上下文

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

Answer 1

是的，您可以在移动设备上执行此操作，将x-mandatory或x-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;
}
}