javascript 实现全屏滚动

缺乏、安全感 2022-11-25 00:44 211阅读 0赞

全屏滚动的过程会逐步优化，从最基本的功能开始。

## 全屏滚动 ##

每张图都占满整个浏览器窗口，当滑动鼠标或者触摸板时，图片切换。

## 效果 ##

可以看到，滑动鼠标或者触摸板时，页面出现了抖动（向上滚动）的情况  
**解决方法： body \{ overflow:hidden \}**

全屏滚动

## 事件 ##

onmousewheel ，鼠标滚轮滚动事件，当鼠标滚动或者滑动触摸板时，该事件触发。可在该事件触发时进行图片切换。

## 一个问题 ##

在页面上测试时发现，每次滑动触摸屏，onmousewheel 触发了很多次，如果每次触发都进行图片切换显然是不合适的。  
所以，这里可以用到事件节流，当onmousewheel事件触发结束后一段时间后再进行图片的切换。

## 代码 ##

#### HTML部分 ####

#### CSS部分 ####

* { 
                padding: 0;
                margin: 0;
            }
            #container { 
                width: 100%;
                height: 100%;
                overflow: hidden;
                position: relative;
            }
    
            #container img { 
                width: 100%;
                height: 100%;
                position: absolute;
            }
    
            #container img:nth-child(1) { 
                z-index: 3;
            }
    
            #container img:nth-child(2) , #container img:nth-child(3) { 
                z-index: 1
            }
           #img-index { 
                position: absolute;
                right: 30px;
                top: 50%;
                transform: translateX(-50%);
                z-index: 9;
            }
    
            #img-index li { 
                width: 12px;
                height: 12px;
                display: block;
                background-color: white;
                margin-bottom: 5px;
                border-radius: 50%;
            }
    
            #img-index li:nth-child(1) { 
                background-color: red;
            }

#### JavaScript部分 ####

#### 当前的问题 ####

现在图片的切换还是不够流畅，有卡顿感 。  
想了想，是因为使用了事件防抖的原因，事件防抖：多次触发事件，只在最后一次触发一段后执行，若这段时间内再次触发事件，因为虽然只轻轻滑动了一下触摸板，但是这个onmousewheel事件触发了很多次，这就导致时间重置很多次。

#### 解决方法 ####

使用事件节流。非立即执行的事件节流。  
结果：还是感觉有些卡顿，但好像比添加了事件防抖好一丢丢。。。。。。。。。。

function jiliu_imme(fn, delay) { 
                var flag;
                return function () { 
                    console.log(flag,888)
                    if (!flag) { 
                        // fn();
                        flag = true
                        setTimeout(function () { 
                            fn()
                            flag = false
                        }, delay)
                    }
                }
            }