This article shares the specific code for vue to realize full-screen scrolling effect (for your reference, the specific content is as follows
What is it
A page of a web page occupies the width and height of a screen, and multiple pages are spliced together up and down or left and right. When sliding the mouse wheel or clicking the navigation button, you can smooth to the corresponding page.
This time, only mouse scrolling is achieved
Implementation principle
Use mousewheel, DOMMouseScroll (for Firefox) to monitor the mouse scroll event. When the mouse scrolls up and down, the current page transformY (screen height) or transformX (screen width)
Code implementation
HTML
<template> <div class="fullPage" ref="fullPage"> <div class="fullPageContainer" ref="fullPageContainer" @mousewheel="mouseWheelHandle" // Listen to mouse events @DOMMouseScroll="mouseWheelHandle" // Listen to mouse events > <div class="section section1">1</div> <div class="section section2">2</div> <div class="section section3">3</div> <div class="section section4">4</div> </div> </div> </template>
JS
<script>
export default {
name: "Home",
data() {
return {
fullpage: {
current: 1, // Current page number isScrolling: false, // Whether it is scrolling is to prevent multiple pages from scrolling. A variable is needed to control whether it is scrolling. deltaY: 0 // Returns the vertical scrolling amount of the mouse scroll wheel, and the deleteY saved mouse scroll event is used to determine whether to scroll down or up }
};
},
methods: {
next() { // Switch down let len = 4; // Number of pages if ( + 1 <= len) { // If the current page number +1 is less than the total number, you can perform a swipe down += 1; // Page +1 (); // Perform switch }
},
pre() {// Switch up if ( - 1 > 0) { // If the current page number -1 is greater than 0, you can perform a swipe down -= 1;// Page +1 ();// Perform switch }
},
move(index) {
= true; // In order to prevent multiple pages from scrolling, it is necessary to use a variable to control whether to scroll (index); //Execute scrolling setTimeout(() => { //The animation here is completed in 1s, use setTimeout to delay 1s and unlock it after delaying 1s. = false;
}, 1010);
},
directToMove(index) {
let height = this.$refs["fullPage"].clientHeight; //Get the width of the screen let scrollPage = this.$refs["fullPageContainer"]; // Get the element that executes the tarnsform let scrollHeight; // Calculate the scrolling tells whether to roll up or down scrollHeight= -(index - 1) * height + "px";
= `translateY(${scrollHeight})`;
= index;
},
mouseWheelHandle(event) { // Listen to the mouse // Add bubble block let evt = event || ;
if () {
();
} else {
= false;
}
if () { // Determine whether it can be scrolled return false;
}
let e = || event;
= || ; // Firefox uses detail if ( > 0) {
();
} else if ( < 0) {
();
}
}
}
};
</script>
CSS
<style scoped>
.fullPage{
height: 100%;//Be sure to set it up to ensure full capacity overflow: hidden;//Be sure to set it, hide the extra ones first background-color: rgb(189, 211, 186);
}
.fullPageContainer{
width: 100%;
height: 100%;
transition: all linear 0.5s;
}
.section {
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
}
.section1 {
background-color: rgb(189, 211, 186);
background: url("./assets/");
}
.section1 .secction1-content {
color: #fff;
text-align: center;
position: absolute;
top: 40%;
right: 0;
left: 0;
}
.secction1-content h1 {
font-size: 40px;
padding-bottom: 30px;
}
.secction1-content p {
font-size: 20px;
}
.section2 {
background-color: rgb(44, 48, 43);
}
.section3 {
background-color: rgb(116, 104, 109);
}
.section4 {
background-color: rgb(201, 202, 157);
}
</style>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.