图片上滚动js代码

<div class="scroll-container">
  <img src="your-image.jpg" alt="Scrolling Image" class="scroll-image">
</div>

.scroll-container {
  height: 300px; /* 设置容器高度 */
  overflow: hidden; /* 隐藏溢出内容 */
  position: relative; /* 设置相对定位 */
}

.scroll-image {
  position: absolute; /* 绝对定位 */
  top: 0;
  left: 0;
  width: 100%; /* 图片宽度占满容器 */
  transition: top 0.5s ease-in-out; /* 平滑过渡效果 */
}

const scrollImage = document.querySelector('.scroll-image');
let scrollPosition = 0;
const scrollSpeed = 1; // 调整滚动速度

window.addEventListener('wheel', (event) => {
  event.preventDefault(); // 阻止默认滚动行为
  scrollPosition += event.deltaY * scrollSpeed;
  // 限制滚动范围，防止图片移出视图
  scrollPosition = Math.max(0, Math.min(scrollPosition, scrollImage.clientHeight - window.innerHeight));
  scrollImage.style.top = `-${scrollPosition}px`;
});