2024年Web前端最全vue实现全屏滚动，非fullpage，销售面试问题及答案

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

this.move(this.fullpage.current);// 执行切换

}

},

move(index) {

this.fullpage.isScrolling = true; // 为了防止滚动多页，需要通过一个变量来控制是否滚动

this.directToMove(index); //执行滚动

setTimeout(() => { //这里的动画是1s执行完，使用setTimeout延迟1s后解锁

this.fullpage.isScrolling = false;

}, 1010);

},

directToMove(index) {

let height = this.$refs[“fullPage”].clientHeight; //获取屏幕的宽度

let scrollPage = this.$refs[“fullPageContainer”]; // 获取执行tarnsform的元素

let scrollHeight; // 计算滚动的告诉，是往上滚还往下滚

scrollHeight= -(index - 1) * height + “px”;

scrollPage.style.transform = translateY(${scrollHeight});

this.fullpage.current = index;

},

mouseWheelHandle(event) { // 监听鼠标监听

// 添加冒泡阻止

let evt = event || window.event;

if (evt.stopPropagation) {

evt.stopPropagation();

} else {

evt.returnValue = false;

}

if (this.fullpage.isScrolling) { // 判断是否可以滚动

return false;

}

let e = event.originalEvent || event;

this.fullpage.deltaY = e.deltaY || e.detail; // Firefox使用detail

if (this.fullpage.deltaY > 0) {

this.next();

} else if (this.fullpage.deltaY < 0) {

this.pre();

}

}

}

};

CSS