新增第230个小实例：原生JS实现全屏滚动

2023-10-30 15:08:26 +08:00 · 2023-10-30 15:08:26 +08:00 · 05e4a90f98
parent abfb47a5e4
commit 05e4a90f98
4 changed files with 131 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -237,6 +237,7 @@
 227. HTML5+CSS3小实例：衣服颜色选择器
 228. HTML5+CSS3小实例：具有悬停效果的3D闪耀动画
 229. HTML5+CSS3+JS小实例：创意罗盘时钟
+230. HTML5+CSS3+JS小实例：原生JS实现全屏滚动

 #### 赞赏作者
 ![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)
--- a/code/230/230.css
+++ b/code/230/230.css
@ -0,0 +1,48 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    /* 满屏 */
+    width: 100vw;
+    height: 100vh;
+    /* 相对定位 */
+    position: relative;
+    /* 溢出隐藏 */
+    overflow: hidden;
+}
+.container{
+    width: 100%;
+    height: 100%;
+    /* 绝对定位 */
+    position: absolute;
+    left: 0;
+    top: 0;
+    /* 添加过渡动画 */
+    transition: all 0.3s ease-in-out;
+}
+.box{
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 150px;
+}
+.box:nth-child(1){
+    background-color: #f00;
+}
+.box:nth-child(2){
+    background-color: #ff0;
+}
+.box:nth-child(3){
+    background-color: #f0f;
+}
+.box:nth-child(4){
+    background-color: #0ff;
+}
+.box:nth-child(5){
+    background-color: #0f0;
+}
--- a/code/230/230.html
+++ b/code/230/230.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>原生JS实现全屏滚动</title>
+    <link rel="stylesheet" href="230.css">
+</head>
+<body>
+    <div class="container">
+        <div class="box">1</div>
+        <div class="box">2</div>
+        <div class="box">3</div>
+        <div class="box">4</div>
+        <div class="box">5</div>
+    </div>
+</body>
+</html>
+<script src="230.js"></script>
--- a/code/230/230.js
+++ b/code/230/230.js
@ -0,0 +1,63 @@
+const container=document.querySelector('.container');
+const boxs=document.querySelectorAll('.box');
+container.style.height=`${boxs.length}00%`;
+// 定义当前页面的索引
+let pageIndex=0;
+// 定义是否允许滚动
+let pageScroll=true;
+// 定义上一次页面的索引
+let prevIndex=0;
+
+// 向上滚动
+function scrollUp(){
+    if(pageIndex>0 && pageScroll){
+        prevIndex=pageIndex;
+        pageIndex--;
+        scrollToPage(pageIndex);
+    }else if(pageIndex<=0){
+        pageIndex=0;
+    }
+}
+// 向下滚动
+function scrollDown(){
+    if(pageIndex<boxs.length-1 && pageScroll){
+        prevIndex=pageIndex;
+        pageIndex++;
+        scrollToPage(pageIndex);
+    }else if(pageIndex>=boxs.length-1){
+        pageIndex=boxs.length-1;
+    }
+}
+// 滚动到指定页面
+function scrollToPage(pageIndex){
+    container.style.top=`-${pageIndex}00%`;
+    pageScroll=false;
+    scrollTimer();
+}
+// 设置定时器，等待500毫秒后，允许再次滚动
+function scrollTimer(){
+    setTimeout(() => {
+        pageScroll=true;
+    }, 500);
+}
+// 鼠标滚轮事件
+function mouseWheel(e){
+    if(e.wheelDelta){
+        if(e.wheelDelta>0){
+            scrollUp();
+        }else{
+            scrollDown();
+        }
+    }else{
+        if(e.detail>0){
+            scrollDown();
+        }else{
+            scrollUp();
+        }
+    }
+}
+// 添加鼠标滚轮事件
+document.onmousewheel=mouseWheel;
+document.addEventListener('DOMMouseScroll',mouseWheel,false);
+// 设置滚动记录
+history.scrollRestoration='manual';