请解释以下代码中CSS的作用及横向滚动效果的实现原理

核心基础概念 #

先明确vw单位的定义：1vw等价于当前浏览器视口宽度的1%，100vw就刚好等于整个视口的宽度。 #

各部分代码作用拆解 #

全局样式 #

body {
  margin: 0;
}

作用是清除浏览器默认给body添加的外边距，避免滚动区域和视口边缘出现空隙，保证内容刚好铺满整个视口。

最外层滚动容器 #

<div style="max-width: 200vw; height: 100vh; overflow-x: scroll">

• max-width: 200vw：限制容器最大宽度为两倍视口宽度，刚好容纳两个全屏宽度的子元素
• height: 100vh：设置容器高度为整个视口高度，占满全屏
• overflow-x: scroll是实现横向滚动的核心属性：当容器内部内容的宽度超过容器本身的可视宽度时，强制在水平方向显示滚动条，允许用户横向滑动查看超出的内容

父级内容容器 #

<div class="parent" style="width: 200vw; height: 100vw">

• width: 200vw：设置容器宽度为两倍视口宽度，刚好等于两个子元素的宽度之和，这是触发外层容器滚动的核心条件——内部内容总宽度超出了外层容器的可视宽度（100vw）

子元素 #

<div class="child" style="float: left; width: 100vw; height: 100vh">Hi</div>
<div class="child" style="float: right; width: 100vw; height: 100vh">Hi</div>

• 每个子元素的width: 100vw保证单个子元素刚好占满一个视口的宽度，height: 100vh让子元素高度占满全屏
• float: left和float: right让两个块级元素脱离常规文档流，在宽度足够的父容器内实现左右并排排列，避免块级元素默认上下堆叠的特性，才能共同撑开父容器的200vw宽度

整体运行逻辑 #

两个并排的100vw子元素撑开了父容器的200vw宽度，父容器放在可视宽度为100vw的外层滚动容器内，因为内容总宽度超出可视宽度，加上外层设置了横向滚动规则，最终就实现了可以左右滑动查看两个全屏内容块的效果。 #

内容的提问来源于stack exchange，提问作者HEMANTH ABHIRAM SOMARAJU