横向滚动画廊特效（竖向滚动驱动横向平移，含进度条）

效果演示（真实可交互）

演示区用内嵌滚动容器模拟页面滚动：向下滚动时画廊横向平移，滚动到一半时到达「终点页」。底部渐变进度条实时显示横向进度。

完整代码

<div class="hg-scroller">
  <div class="hg-stage">
    <div class="hg-view">
      <div class="hg-track" id="hgTrack">
        <div class="hg-card">01 极光</div>
        <!-- 更多卡片…… -->
      </div>
    </div>
  </div>
</div>

.hg-scroller { height: 460px; overflow-y: auto; }
.hg-stage { height: 920px; }          /* 视口两倍：一半平移、一半收尾 */
.hg-view { position: sticky; top: 0; height: 460px; overflow: hidden; }
.hg-track { display: flex; gap: 20px; will-change: transform; }

function update() {
  const max = scroller.scrollHeight - scroller.clientHeight;
  const p = max > 0 ? scroller.scrollTop / max : 0;
  const maxDist = track.scrollWidth - scroller.clientWidth;
  track.style.transform = `translateX(${-p * maxDist}px)`;
}
scroller.addEventListener('scroll', update, { passive: true });

实现要点：position: sticky 让画廊视口在滚动过程中「钉」在容器顶部，竖向滚动距离按比例换算成横向平移量 -p × maxDist。舞台高度设为视口两倍：前半段完成平移，后半段露出终点页。整页使用同理，把滚动容器换成 window。

参数说明

兼容性与性能

• 滚动回调只更新一条 transform（合成层属性），平移全程由 GPU 合成，60fps 无压力
• position: sticky 是浏览器原生特性，无需 JS 模拟粘性，避免滚动劫持带来的卡顿
• 舞台高度、卡片宽度在 resize 时重算一次即可；滚动中只读一次 scrollWidth，无布局抖动
• 全浏览器兼容（Chrome / Safari / Firefox / Edge / iOS / Android 现代版本），无需任何 polyfill

常见问题

Q: 为什么叫「横向走廊」？ 因为视觉上像在走廊里横移浏览：竖向滚动被「翻译」成横向位移，浏览完一组作品后自动进入下一屏，叙事感强，适合作品集与案例展示。

Q: sticky 在部分安卓浏览器上失效？ 极老机型存在此问题。可退化方案：用 position: fixed + JS 同步容器位置，或直接降级为普通横向滚动；现代浏览器均正常。

Q: 平移距离和滚动距离对不上？ 检查 maxDist 计算是否在卡片布局完成后执行：scrollWidth 需在图片/字体加载后读取，建议在 resize 与 load 时重算。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名，无任何协议限制。