纯JavaScript实现垂直滚动时元素水平移动效果

需求概述 #

实现目标：页面垂直滚动时，指定元素（如图片）从屏幕最左侧开始，随滚动逐步移动至最右侧；仅当元素出现在视口中时触发该效果，效果与原jQuery实现一致，需使用纯JavaScript完成。

原jQuery逻辑转换为原生JS #

原jQuery代码核心是通过计算滚动百分比，动态设置元素的left属性。以下是对应的纯JavaScript实现：

完整代码示例 #

HTML结构

<div id="horizontal">
  <!-- 替换为你的图片或内容 -->
  <img src="your-image.jpg" alt="滚动移动的图片">
</div>
<!-- 为页面添加足够滚动空间 -->
<div class="scroll-spacer"></div>

CSS样式

body {
  margin: 0;
}

#horizontal {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 120px; /* 根据元素实际尺寸调整 */
}

.scroll-spacer {
  height: 2000px; /* 确保页面可滚动 */
}

JavaScript代码

// 获取目标元素
const horizontalEl = document.getElementById('horizontal');

// 滚动处理函数
function updateHorizontalPosition() {
  // 判断元素是否在视口中
  const elementRect = horizontalEl.getBoundingClientRect();
  const isInViewport = elementRect.top < window.innerHeight && elementRect.bottom > 0;

  if (!isInViewport) {
    // 元素不在视口时重置位置（可根据需求调整逻辑）
    horizontalEl.style.left = '0px';
    return;
  }

  // 计算滚动相关参数
  const scrollDistance = window.scrollY;
  const totalDocHeight = document.documentElement.scrollHeight;
  const windowHeight = window.innerHeight;
  const scrollPercent = scrollDistance / (totalDocHeight - windowHeight);

  // 计算元素最大可移动距离与当前位置
  const maxHorizontalPos = document.documentElement.clientWidth - horizontalEl.offsetWidth;
  const currentPos = scrollPercent * maxHorizontalPos;

  // 设置元素水平位置
  horizontalEl.style.left = `${currentPos}px`;
}

// 页面加载时初始化位置
updateHorizontalPosition();

// 监听滚动事件
window.addEventListener('scroll', updateHorizontalPosition);

代码说明 #

• 视口检测：通过getBoundingClientRect()获取元素位置，仅当元素进入视口时执行移动逻辑。
• 滚动百分比计算：scrollPercent代表当前滚动距离占总可滚动距离的比例，范围为0（页面顶部）到1（页面底部）。
• 水平位置计算：用滚动百分比乘以元素的最大可移动水平距离（屏幕宽度减去元素自身宽度），实现元素从左到右的平滑移动。
• 初始执行：页面加载时调用一次处理函数，避免元素初始位置异常。

内容的提问来源于stack exchange，提问作者Iman B. Rad