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 tutorial on deploying Hadoop cluster using Docker
Recently, I want to build a hadoop test cluster i...
Detailed explanation of cross-usage of Ref in React
Table of contents 1. First, let’s explain what Re...
SQL Practice Exercise: Online Mall Database User Information Data Operation
Online shopping mall database-user information da...
The use of anchor points in HTML_PowerNode Java Academy
Now let's summarize several situations of con...
Docker uses CMD or ENTRYPOINT commands to start multiple services at the same time
Requirement: Celery is introduced in Django. When...
Detailed explanation of the use of Element el-button button component
1. Background Buttons are very commonly used, and...
Detailed explanation of how to write mysql not equal to null and equal to null
1. Table structure 2. Table data 3. The query tea...
Detailed tutorial on installing pxc cluster with docker
Table of contents Preface Preliminary preparation...
Incredible CSS navigation bar underline following effect
The first cutter in China github.com/chokcoco Fir...
Teach you how to use MySQL8 recursive method
I have previously written an article about recurs...
Solve the problems that need to be paid attention to when configuring Tomcat's maxPostSize attribute
need: In the near future, we will implement the l...
A brief discussion on Python's function knowledge
Table of contents Two major categories of functio...
HTML version declaration DOCTYPE tag
When we open the source code of a regular website...
MySQL database implements OLTP benchmark test based on sysbench
Sysbench is an excellent benchmark tool that can ...
Detailed steps to install 64-bit Ubuntu system and Docker tool on Raspberry Pi 3B+
If you want to install some 64-bit applications (...