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 the process of building an MQTT server using Docker
1. Pull the image docker pull registry.cn-hangzho...
Using CSS3's 3D effects to create a cube
Learning to use CSS3's 3D effects to create a...
Quickly solve the problem that CentOS cannot access the Internet in VMware
Yesterday I installed CentOS7 under VMware. I wan...
Summary of several MySQL installation methods and configuration issues
1. MySQL rpm package installation # Download the ...
MySQL learning notes: data engine
View the engines supported by the current databas...
Summary of various forms of applying CSS styles in web pages
1. Inline style, placed in <body></body&g...
js to achieve drag and drop sorting details
Table of contents 1. Introduction 2. Implementati...
Handtrack.js library for real-time monitoring of hand movements (recommended)
【Introduction】: Handtrack.js is a prototype libra...
Detailed explanation on how to avoid the pitfalls of replacing logical SQL in MySQL
The difference between replace into and insert in...
Solve the problem of black screen when starting VMware virtual machine
# Adjust VMware hard disk boot priority Step 1: E...
HTML table markup tutorial (2): table border attributes BORDER
By default, the border of the table is 0, and we ...
Implementation of forced line breaks and non-line breaks in div, td, p and other containers in HTML
1. Force no line break and end with an ellipsis. C...
Common ways to optimize Docker image size
The Docker images we usually build are usually la...
Share JS four fun hacker background effect codes
Table of contents Example 1 Example 2 Example 3 E...
Write a shopping mall card coupon using CSS in three steps
Today is 618, and all major shopping malls are ho...