JavaScript实现长图滚动效果

下面是JavaScript实现长图滚动效果的完整攻略：

1. 原理介绍

实现长图滚动效果的原理是通过监听滚动事件来实现图片的滚动。具体来说，就是通过监测滚动事件中的scrollTop值来确定图片的位置，然后通过修改图片的位置来使其滚动。

2. 实现步骤

具体实现步骤如下：

2.1 HTML结构

先确定HTML结构，可以是一个包含多张图片的父元素。

<div class="scroll-wrapper">
  <img src="image1.jpg" />
  <img src="image2.jpg" />
  <img src="image3.jpg" />
  ...
</div>

2.2 CSS样式

设置父元素为相对定位，图片为绝对定位，并设置左右上下的样式。

.scroll-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 300px;
}

.scroll-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

2.3 JavaScript代码

2.3.1 获取滑块距离顶部的距离

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

2.3.2 监听滑动事件

window.addEventListener('scroll', function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  // 更改图片位置
});

2.3.3 更改图片位置

var scrollWrapper = document.querySelector('.scroll-wrapper');  // 获取父元素
var images = scrollWrapper.querySelectorAll('img');  // 获取所有图片节点
for (var i = 0; i < images.length; i++) {
  var image = images[i];
  var top = image.offsetTop - scrollTop;  // 计算图片距离父元素顶部的距离
  if (top < 0 - image.clientHeight) {
    top = scrollWrapper.clientHeight;  // 图片超出范围，跳到最后
  }
  image.style.top = top + 'px';  // 更新图片位置
}

3. 示例说明

3.1 示例一

代码演示：https://codepen.io/misstina/pen/KKpYXbx

3.2 示例二

代码演示：https://codepen.io/misstina/pen/xxOaoBb

以上两个示例均为实现长图滚动效果的完整代码，具体可参考。