vue实现全屏滚动,非fullpage.js

是什么

网页的一个页面占据一屏的宽高,多个页面上下或者左右拼接在一起。当滑动鼠标滚轮,或点击导航按钮时,可以平滑到对应的页面。

此次只实现鼠标滚动

实现原理

  1. 使用mousewheel , DOMMouseScroll(火狐用)监听鼠标滚动事件,当鼠标上下的滚动的时候,当前的页面transformY(屏高)或者transformX(屏宽)

代码实现

HTML

JS

CSS


你可能感兴趣的:(vue实现全屏滚动,非fullpage.js)