HTML无限横向滚动图片位移异常问题求助

核心问题 #

1. 布局冲突：.img同时设置display: inline-block和position: absolute，absolute元素脱离文档流导致初始位置重叠，offsetLeft无法反映预期的横向排列位置，移动逻辑自然失效。
2. 单位依赖错误：依赖offsetLeft像素值做位置交换，但图片尺寸用vw单位，窗口缩放时像素与vw的对应关系变化，导致移动步长不符合预期。
3. 无限滚动逻辑冗余：当前通过交换所有元素位置实现滚动，效率低且易出现位置偏差，正确的无限滚动应仅移动边界元素到另一侧。

修正代码 #

HTML #

<div class="projectContainer">
  <div id="project8" class="project">
    <p class="img">Project Description</p>
    <img alt="Projektbild" src="https://picsum.photos/200/300" class="img">
    <img alt="Projektbild" src="https://picsum.photos/200/300" class="img">
    <img alt="Projektbild" src="https://picsum.photos/200/300" class="img">
    <img alt="Projektbild" src="https://picsum.photos/200/300" class="img">
    <img alt="Projektbild" src="https://picsum.photos/200/300" class="img">
    <img alt="Projektbild" src="https://picsum.photos/200/300" class="img">
    <img alt="Projektbild" src="https://picsum.photos/200/300" class="img">
    <img alt="Projektbild" src="https://picsum.photos/200/300" class="img">
    <img alt="Projektbild" src="https://picsum.photos/200/300" class="img">
    <img alt="Projektbild" src="https://picsum.photos/200/300" class="img">
    <img alt="Projektbild" src="https://picsum.photos/200/300" class="img">
    <img alt="Projektbild" src="https://picsum.photos/200/300" class="img">
    <img alt="Projektbild" src="https://picsum.photos/200/300" class="img">
  </div>
  <img src="https://i.sstatic.net/JpbbB6V2.png" id="left" onclick="moveProject('right', document.getElementById('project8'))">
  <img src="https://i.sstatic.net/6HqVMRmB.png" id="right" onclick="moveProject('left', document.getElementById('project8'))">
</div>

CSS #

.projectContainer {
  position: relative;
  margin-top: 20vh;
  height: 70vh;
  overflow: hidden;
  width: 100vw;
}

.project {
  display: flex;
  height: 70vh;
  transition: transform 0.5s ease;
}

.img {
  flex-shrink: 0;
  height: 70vh;
  width: 47vw;
  object-fit: cover;
  margin-left: 2vw;
  white-space: normal;
}

.img:first-child {
  margin-left: 0;
}

#left {
  left: 2vw;
}

#right {
  right: 2vw;
}

#right,
#left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 3vh;
  width: 3vh;
  cursor: pointer;
  z-index: 5;
}

JS #

let allowNewMovement = true;
const stepSize = 49; // 图片宽度47vw + 间距2vw

function moveProject(direction, parent) {
  if (!allowNewMovement) return;
  
  allowNewMovement = false;
  const step = stepSize * window.innerWidth / 100;

  if (direction === 'left') {
    const firstChild = parent.firstElementChild;
    parent.appendChild(firstChild);
    parent.style.transform = `translateX(${step}px)`;
    setTimeout(() => {
      parent.style.transform = '';
      allowNewMovement = true;
    }, 500);
  } else {
    const lastChild = parent.lastElementChild;
    parent.prepend(lastChild);
    parent.style.transform = `translateX(${-step}px)`;
    setTimeout(() => {
      parent.style.transform = '';
      allowNewMovement = true;
    }, 500);
  }
}

说明 #

1. 布局修正：用flex实现图片横向排列，避免absolute导致的布局混乱，flex-shrink: 0保证图片尺寸不被压缩。
2. 步长计算：基于vw转换为像素步长，适配窗口大小变化，确保每次移动距离准确。
3. 无限滚动逻辑：仅移动边界元素到另一侧，配合transform实现平滑过渡，避免交换所有元素的冗余操作，同时解决视觉跳变问题。

内容的提问来源于stack exchange，提问作者Leonard __