如何使用Tailwind、HTML与JS实现鼠标滚轮触发的横向滚动轮播滑块

以下是适配Tailwind + HTML + JavaScript的可直接运行实现，交互逻辑为页面滚动到滑块区域后，向下滚动鼠标滚轮即可触发内容横向滑动。

1. HTML结构 #

<!-- 外层占位容器，用于撑开页面高度，匹配横向滑动所需的滚动距离 -->
<div class="relative">
  <!-- 滑块固定容器，进入视口后自动粘在顶部 -->
  <div id="horizontal-slider-container" class="sticky top-0 h-screen w-full overflow-x-hidden">
    <!-- 横向滑动内容列表 -->
    <div id="horizontal-slider" class="flex h-full items-center gap-8 px-8 will-change-transform">
      <!-- 滑块项示例，可替换为你的项目卡片/图片内容 -->
      <div class="w-[80vw] h-[80vh] shrink-0 rounded-lg bg-slate-200 flex items-center justify-center text-3xl">项目1</div>
      <div class="w-[80vw] h-[80vh] shrink-0 rounded-lg bg-slate-300 flex items-center justify-center text-3xl">项目2</div>
      <div class="w-[80vw] h-[80vh] shrink-0 rounded-lg bg-slate-400 flex items-center justify-center text-3xl">项目3</div>
      <div class="w-[80vw] h-[80vh] shrink-0 rounded-lg bg-slate-500 flex items-center justify-center text-3xl">项目4</div>
      <div class="w-[80vw] h-[80vh] shrink-0 rounded-lg bg-slate-600 flex items-center justify-center text-3xl">项目5</div>
    </div>
  </div>
</div>

2. JavaScript逻辑 #

const sliderContainer = document.getElementById('horizontal-slider-container')
const slider = document.getElementById('horizontal-slider')
let maxHorizontalScroll = 0

// 计算滑块尺寸与对应页面滚动高度
function calculateSize() {
  // 计算滑块最大可横向滚动距离
  maxHorizontalScroll = slider.scrollWidth - window.innerWidth
  // 动态设置外层占位容器高度，保证垂直滚动距离与横向滑动距离匹配
  sliderContainer.parentElement.style.height = `${window.innerHeight + maxHorizontalScroll}px`
}
calculateSize()
// 窗口尺寸变化时重新计算适配
window.addEventListener('resize', calculateSize)

// 监听页面滚动事件，映射为滑块横向偏移
window.addEventListener('scroll', () => {
  const containerOffsetTop = sliderContainer.parentElement.offsetTop
  const currentScroll = window.scrollY - containerOffsetTop
  if (currentScroll >= 0 && currentScroll <= maxHorizontalScroll) {
    slider.style.transform = `translateX(${-currentScroll}px)`
  } else if (currentScroll < 0) {
    slider.style.transform = 'translateX(0)'
  } else {
    slider.style.transform = `translateX(${-maxHorizontalScroll}px)`
  }
})

3. 自定义调整说明 #

• 如需增加滑动平滑度，可给#horizontal-slider添加transition-transform duration-300 ease-out Tailwind类
• 可调整滑块项的w-[80vw]、h-[80vh]、gap-8类修改单个滑块的尺寸和间距
• 如需调整滚动速率，可在设置translateX时给currentScroll乘以自定义系数，比如-currentScroll * 0.8即可降低滚动速度

内容的提问来源于stack exchange，提问作者crucio draco