滚动时显示图片效果实现技术咨询

先明确目标页面的核心效果：双行横向排列的项目图片网格，支持鼠标滚轮纵向滚动转为横向滑动，带有平滑过渡动画，同时包含图片懒加载优化。以下是具体实现方案：

技术栈选型 #

• 基础结构：HTML + CSS（用CSS Grid/Flexbox实现流式横向布局）
• 交互逻辑：原生JavaScript（或轻量滑块库）处理滚动事件、触摸适配
• 性能优化：图片懒加载、滚动事件节流防抖

具体实现步骤 #

1. 搭建横向网格布局 #

用CSS Grid创建双行横向流式布局，让容器支持横向滚动：

/* 滚动容器 */
.work-gallery {
  overflow-x: auto;
  scroll-behavior: smooth; /* 原生平滑滚动 */
  padding: 2rem 0;
  /* 隐藏滚动条（和目标站一致） */
  scrollbar-width: none;
}
.work-gallery::-webkit-scrollbar {
  display: none;
}

/* 图片网格 */
.gallery-grid {
  display: grid;
  grid-auto-flow: column; /* 项目横向排列 */
  grid-template-rows: repeat(2, 320px); /* 双行布局，匹配目标站高度 */
  grid-gap: 1.8rem;
  padding: 0 1.2rem;
}

/* 图片项 */
.gallery-item {
  width: 420px; /* 固定单图宽度 */
  height: 100%;
  object-fit: cover; /* 保持图片比例 */
  border-radius: 8px; /* 匹配目标站的圆角样式 */
}

2. 鼠标滚轮转横向滚动 #

通过JS监听滚轮事件，把纵向滚轮动作转为横向滚动，同时添加平滑效果：

const galleryContainer = document.querySelector('.work-gallery');

galleryContainer.addEventListener('wheel', (e) => {
  e.preventDefault();
  // 用requestAnimationFrame做简易节流，避免频繁触发重绘
  requestAnimationFrame(() => {
    galleryContainer.scrollBy({
      left: e.deltaY * 1.6, // 调整滚动速度系数，适配手感
      behavior: 'smooth'
    });
  });
});

3. 移动端触摸适配 #

监听触摸事件，实现移动端横向滑动交互：

let startX;
let initialScrollLeft;

galleryContainer.addEventListener('touchstart', (e) => {
  startX = e.touches[0].pageX - galleryContainer.offsetLeft;
  initialScrollLeft = galleryContainer.scrollLeft;
});

galleryContainer.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const currentX = e.touches[0].pageX - galleryContainer.offsetLeft;
  const scrollDistance = (currentX - startX) * 2; // 滑动灵敏度系数
  galleryContainer.scrollLeft = initialScrollLeft - scrollDistance;
});

4. 性能优化 #

• 图片懒加载：给图片标签添加loading="lazy"属性，或用Intersection Observer API实现更精准的懒加载
• 滚动节流：用节流函数（如自定义实现或成熟工具库的节流方法）包裹滚动逻辑，减少重绘次数

参考资源与替代方案 #

• 布局相关：MDN文档中的CSS Grid布局指南，重点查看grid-auto-flow属性用法
• 滚动交互：MDN的滚动行为（scroll-behavior）和触摸事件API文档
• 快速实现：若不想手写原生逻辑，可使用Swiper这类轻量滑块库，配置双行横向布局、滚轮触发滑动即可

内容的提问来源于stack exchange，提问作者zakaria kamili