jQuery achieves full screen scrolling effect
|
This article example shares the specific code of jQuery to achieve full-screen scrolling for your reference. The specific content is as follows Rendering
Ideas1. To make it full screen, set the parent, body, html, height to 100%, the width to 100%, and set overflow hiding for html and body
html,body{
height:100%;
/* Achieve full screen */
overflow: hidden;
}
.wrap{
position: relative;
top: 0;
left: 0;
/* Achieve full screen */
height: 100%;
}
div.wrap>div{
width:100%;height:100%;
}2. Import mousewheel after importing min.js <script src="../../0817/jquery-3.5.1/jquery-3.5.1.min.js"></script> <script src="../../0817/jquery-3.5.1/jquery.mousewheel.min.js"></script> 3. e.deltaY>0 slide up e.deltaY<0 slide down 4. Control the slide once
<script>
var flag = true;
if(flag){
//Slide upif(e.deltaY>0){
flag = false;
}
//Slide down else{
flag = false;
}
</script>5. To make it slide, the parent should be changed (here is the top of wrap, not the top of document. I had the wrong idea at the beginning. Its height should be the height of the child * -1). Note that you should be able to continue sliding after each slide, so you should write flag = true in the function. In order to prevent it from crossing the boundary, write the up and down slides in an if. See the code below
<script>
// Control sliding once if(flag){
//Slide upif(e.deltaY>0){
//Cannot slide up if(i>0){
console.log(i)
i--;
flag = false;
$('.wrap').animate({top:-i*hei},1000,function(){
flag=true;
})
}
}//Slide down else{
// This if prevents it from sliding down if(i<4){
i++;
flag = false;
$('.wrap').animate({top:-i*hei},1000,function(){
flag=true;
})
}
}
}
</script>Complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0;padding:0;}
/* Achieve full screen */
html,body{
height:100%;
overflow: hidden;
}
.wrap{
position: relative;
top: 0;
left: 0;
/* Achieve full screen */
height: 100%;
}
div.wrap>div{
width:100%;
height:100%;
}
div.one{
background:lightcoral;
}
div.two{
background:lightblue;
}
div.three{
background:lightseagreen;
}
div.four{
background:lightslategray;
}
div.five{
background:pink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
<script src="../../0817/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="../../0817/jquery-3.5.1/jquery.mousewheel.min.js"></script>
<script>
$(function(){
var flag = true;
var i=0;
var hei=$('.wrap>div').first().height();
$(document).mousewheel(function(e){
// Control sliding once if(flag){
//Slide upif(e.deltaY>0){
//Cannot slide up if(i>0){
console.log(i)
i--;
flag = false;
$('.wrap').animate({top:-i*hei},1000,function(){
flag=true;
})
}
}//Slide down else{
// This if prevents it from sliding down if(i<4){
i++;
flag = false;
$('.wrap').animate({top:-i*hei},1000,function(){
flag=true;
})
}
}
}
})
})
</script>
</body>
</html>Summarize:1.top to achieve 2. Remember to overflow 3. The top of the slide up is still a negative number, not a positive number 4. The height and width should be set to 100% The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: CentOS7.5 installation of MySQL8.0.19 tutorial detailed instructions
>>: Docker's four network types principle examples
Recommend
Detailed explanation of Javascript event capture and bubbling methods
Table of contents 1. Event Processing Model 1. Ev...
Ways to improve MongoDB performance
MongoDB is a high-performance database, but in th...
Solution to Incorrect string value in MySQL
Many friends will report the following error when...
Talk about nextTick in Vue
When the data changes, the DOM view is not update...
Docker Nginx container production and deployment implementation method
Quick Start 1. Find the nginx image on Docker Hub...
Simple example of adding and removing HTML nodes
<br />Simple example of adding and removing ...
Example code for CSS pseudo-classes to modify input selection style
Note: This table is quoted from the W3School tuto...
Use vue2+elementui for hover prompts
Vue2+elementui's hover prompts are divided in...
JavaScript object-oriented class inheritance case explanation
1. Object-oriented class inheritance In the above...
Detailed explanation of key uniqueness of v-for in Vue
Table of contents 1. DOM Diff 2. Add key attribut...
Docker online and offline installation and common command operations
1. Test environment name Version centos 7.6 docke...
Analysis of the principle and usage of MySQL custom functions
This article uses examples to illustrate the prin...
Table setting background image cannot be 100% displayed solution
The following situations were discovered during d...
Getting Started with MySQL - Concepts
1. What is it? MySQL is the most popular relation...
Learn how to use JavaScript's new Element Traversal property to traverse child elements
Table of contents 1. ChildNodes attribute travers...