通常在实现一些展示性的网页的时候,我们会选择两种方式:制作基于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)";
}
});