横向虚拟滚动需用固定宽外层容器+flex内层列表，通过translateX偏移实现；计算可视范围时以容器边界为准，结合拖拽交互、懒加载和响应式重算。
虚拟滚动实现横向滚动列表，核心是只渲染视口内可见的图片项，同时通过 transform: translateX() 动态控制容器偏移，避免重排重绘。图片墙场景下，需特别关注列宽动态计算、懒加载协同、以及触摸/鼠标拖拽的流畅性。
确定滚动容器与子项布局方式
横向虚拟滚动不能依赖原生 overflow-x: auto 直接滚动内容区（否则会触发全量渲染），必须用固定宽度容器包裹可平移的内层列表，并禁用默认滚动：
- 外层容器设
overflow: hidden、固定宽度（如 100% 或具体 px） - 内层列表设
display: flex; white-space: nowrap;，不设 width，靠子项撑开 - 每个图片项设固定或等比宽度（如按容器宽度 / 列数计算），高度自适应或统一比例
- 用
transform: translateX(-${offset}px)移动内层列表，offset 根据滚动位置实时计算
计算可视区域与渲染范围
横向滚动中，可视宽度 = 容器 clientWidth；每张图宽度已知（如 200px），则当前应渲染的起始索引和数量为：
- 起始索引：
Math.max(0, Math.floor(scrollLeft / itemWidth) - buffer)（buffer 通常取 2~3 项） - 渲染数量：
Math.ceil((containerWidth / itemWidth) + buffer * 2) - 注意：scrollLeft 来源不是原生 scroll 事件（因禁用了滚动），而是通过鼠标拖拽位移或 touchmove 的 delta 累加得到
处理拖拽交互与滚动惯性
图片墙常需手动拖拽浏览，需模拟原生滚动行为：
- 监听
mousedown/touchstart记录初始位置，mousemove/touchmove计算位移差并更新 translateX - 松手后根据末速度做简单惯性动画（可用 requestAnimationFrame + 减速衰减公式）
- 边界限制：offset 不得小于 0，也不得大于
maxOffset = totalWidth - containerWidth - 配合
will-change: transform和启用 GPU 加速提升拖拽帧率
协同图片懒加载与占位策略
虚拟滚动本身减少 DOM 数量，但图片仍可能大量请求。优化要点：
- 仅对当前渲染范围内且进入视口 100px 内的图片触发加载（可用 IntersectionObserver 或简易距离判断）
- 所有图片项统一用相同尺寸的骨架占位图或 CSS 骨架（避免布局抖动）
- 预估图片宽高比（如 4:3），用
aspect-ratio或 padding-bottom 百分比维持容器结构稳定 - 缓存已加载图片的尺寸，避免重复测量影响滚动性能
不复杂但容易忽略的是：横向虚拟滚动的“可视区间”判断必须基于容器左边界和右边界，而非单个元素是否在屏幕内；另外，缩放、响应式宽度变化时要重新计算列数和 offset，建议封装为可响应的 hooks 或 class。
