如何实现横向Slider的无限滚动效果？现有代码滚动到Item6后停止

核心改动点 #

• 新增子元素自动复制逻辑，每个容器末尾拼接一份相同的item列表，作为无缝衔接的过渡载体
• 移除容器固定宽度配置，改为自适应内容宽度，同时给item添加不可压缩属性避免布局变形
• 滚动偏移计算新增取模逻辑，滚动距离超过单轮item总宽度时自动重置偏移量，实现无感知循环
• 修复原有代码中container1位置变量重复赋值的bug，两个容器的倾斜效果可独立生效

完整修改代码 #

JavaScript代码 #

let container = document.querySelector(".container")
let container1 = document.querySelector(".container1")

// 复制容器子元素，返回单轮item总宽度
const cloneItems = (container) => {
  const items = Array.from(container.children)
  items.forEach(item => {
    const clone = item.cloneNode(true)
    container.appendChild(clone)
  })
  return items.reduce((totalWidth, item) => totalWidth + item.offsetWidth, 0)
}

const containerCycleWidth = cloneItems(container)
const container1CycleWidth = cloneItems(container1)

window.onscroll = ()=>{
  const scrollY = window.scrollY
  // 取模实现滚动偏移循环，无感知衔接
  container.style.left = `${-scrollY % containerCycleWidth}px` 
  container1.style.right = `${-scrollY % container1CycleWidth}px` 
}
let currentpos = container.getBoundingClientRect().left
let currentpos1 = container1.getBoundingClientRect().left


let callDisort = () =>{
  let newPos = container.getBoundingClientRect().left;
  let newPos1 = container1.getBoundingClientRect().left;
  let diff = newPos - currentpos;
  let speed = diff * 0.50
  container.style.transform = `skewX(${speed}deg)`
  currentpos = newPos
  let diff1 = newPos1 - currentpos1
  let speed1 = diff1 * 0.50
  container1.style.transform = `skewX(${speed1}deg)`
  currentpos1 = newPos1

  requestAnimationFrame(callDisort)
}

callDisort()

CSS代码 #

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: arial;
}
html,body{
  height:10000px;
  overflow-X:hidden;
}

.container{
  position:fixed;
  display:flex;
  justify-content: space-between;
  top:30vh;
  width: fit-content;
  transition:transform 0.15s;
  will-change:transform;
  border:2px solid green;
  gap: 40px;
}
.container1{
  position:fixed;
  display:flex;
  justify-content: space-evenly;
  top:45vh;
  width: fit-content;
  transition:transform 0.15s;
  will-change:transform;
  border:2px solid green;
  gap: 60px;
}

.box{
  position:relative;
  flex-shrink: 0;
}
.box h2{
  font-size:4em;
}

HTML代码 #

无需修改，保持原有结构即可。

实现原理 #

复制一轮item后，当滚动偏移刚好走完单轮所有item的总宽度时，取模运算会将偏移重置为0，此时视觉上第二轮的首个item（即原Item1）刚好和第一轮的首个item位置重合，无跳跃感，即可实现无限滚动效果。

内容的提问来源于stack exchange，提问作者Shayan Kanwal