滚轮事件(wheel)与Transform实现图片上下翻滚

最新推荐文章于 2024-02-05 17:04:15 发布

lqy455949477

最新推荐文章于 2024-02-05 17:04:15 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/lqy455949477/article/details/78244464

web 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种基于鼠标滚轮事件和CSS3 transform属性实现的Y轴上下翻页效果。通过监听WheelEvent并利用deltaY属性判断滚动方向，配合简单的JavaScript代码，实现了平滑的页面翻转动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常在实现一些展示性的网页的时候，我们会选择两种方式：制作基于x轴的轮播插件，或者基于y轴上下翻滚的页面。前者的实现已经非常广泛，然而后者也有着非常不错的效果，而且实现起来更为简单。需要使用的仅仅是wheel事件和css3的transform的结合。

首先，在较新版本的浏览器中，鼠标滚动事件已经被规整到WheelEvent中，为了保持兼容性，建议对以前的DOMMouseScroll和MouseWheel事件也进行相同的监听。
实现的原理是，利用WheelEvent中的deltaY属性，获取用户是向上翻滚还是向下翻滚（向上为负数，向下为正数）。
先将除第一个以外的element的transform属性设置为translateY(100%)。如果为向下，对当前element修改属性

transform: translateY(-100%);

将当前的element向上翻滚。同时，对下一个element修改属性

transform: translateY(0);

即可实现翻滚。在此之间可以添加一些动态效果，比如transition，使得效果更为平滑。这里给出一个例子（默认每个图片的id为索引）

let arr = new Array(5);
let currentTarget = 0;
document.addEventListener('wheel', (event) => {
  if (event.deltaY > 0) {
    currentTarget = currentTarget === arr.length - 1 ?
      arr.length - 1 : currentTarget + 1;
    document.getElementById((currentTarget - 1).toString())
      .style.transform = "translateY(-100%)";
    document.getElementById(currentTarget.toString())
      .style.transform = "translateY(0)";
  } else if(event.deltaY < 0) {
  currentTarget = currentTarget === 0 ? 0 : currentTarget - 1;
  document.getElementById((currentTarget + 1).toString())
    .style.transform = "translateY(100%)";
  document.getElementById(currentTarget.toString())
    .style.transform = "translateY(0)";
  }
});