Question

我一直在尝试使用在鼠标滚轮上触发的location.href创建一个简单的“平滑滚动”功能。主要的问题是EventListener（wheel ..）在ca的范围内获得了一堆输入。 0,9秒，持续触发该功能。 “我只希望函数运行一次”。

在下面的代码中，我试图在函数运行时立即删除事件监听器，这实际上是可行的，问题是我希望再次添加它，因此定时函数位于底部。这也有点工作，但我不想等待一秒钟就能滚动，如果我将它设置为任何情人，该功能将运行多次。我还尝试使用条件“注释掉的真或假变量”执行此操作，只要您仅上下滚动即可，但不能滚动两次或向下滚动两次。


window.addEventListener('wheel', scrolltest, true);
function scrolltest(event) {
    window.removeEventListener('wheel', scrolltest, true);
    i = event.deltaY;
    console.log(i);

    if (webstate == 0) {
        if (i < 0 && !upexecuted) {
            // upexecuted = true;
            location.href = "#forside";
            // downexecuted = false;
        } else if (i > 0 && !downexecuted) {
            // downexecuted = true;
            location.href = "#underside";
            // upexecuted = false;
        }
    }

    setTimeout(function(){ window.addEventListener('wheel', scrolltest, true); }, 1000);
}

我希望有一种方法可以阻止轮子在至少0.9秒的时间内不断产生输入信号。

“注意：不知道它是否可以以某种方式提供帮助，但是当未单击浏览器（活动窗口）时，滚轮将仅注册一个值，向下为100，向上为-100”

Answer 1

您要尝试的操作称为“反跳”或“调节”。（它们不是完全一样的，但是您可以根据实际情况查找差异。）为此功能内置在lodash之类的库中，但是如果使用类似的库也是如此对于您的初衷，您可以随时定义自己的去抖动功能：https://www.geeksforgeeks.org/debouncing-in-javascript/

您可能还想研究requestanimationframe。

Answer 2

另一种方法 oky对这件事感到不安之后，大约两天，我感到沮丧并重新开始。无论我做了什么，浏览器集成的“ glide-scroll”都弄乱了事件触发器。无论如何，我决定自己制作滚动动画，说实话，它的效果比我想象的要好：如果有人想要这样做，这是我的代码：

    var body = document.getElementsByTagName("BODY")[0];
    var p1 = document.getElementById('page1');
    var p2 = document.getElementById('page2');
    var p3 = document.getElementById('page3');
    var p4 = document.getElementById('page4');
    var p5 = document.getElementById('page5');
    var whatpage = 1;
    var snap = 50;
    var i = 0;

// this part is really just to read what "page" you are on if you update the site. if you add more pages you should remember to add it here too.
window.onload = setcurrentpage;
function setcurrentpage() {
    if (window.pageYOffset == p1.offsetTop) {
        whatpage = 1;
    } else if (window.pageYOffset == p2.offsetTop) {
        whatpage = 2;
    } else if (window.pageYOffset == p3.offsetTop) {
        whatpage = 3;
    } else if (window.pageYOffset == p4.offsetTop) {
        whatpage = 4;
    } else if (window.pageYOffset == p5.offsetTop) {
        whatpage = 5;
    }
}

// this code is designet to automaticly work with any "id" you have aslong as you give it a variable called p"number" fx p10 as seen above.
function smoothscroll() {
    var whatpagenext = whatpage+1;
    var whatpageprev = whatpage-1;
    var currentpage = window['p'+whatpage];
    var nextpage = window['p'+whatpagenext];
    var prevpage = window['p'+whatpageprev];
    console.log(currentpage);
    if (window.pageYOffset > currentpage.offsetTop + snap && window.pageYOffset < nextpage.offsetTop - snap){
        body.style.overflowY = "hidden";
        i++
        window.scrollTo(0, window.pageYOffset+i);
            if (window.pageYOffset <= nextpage.offsetTop + snap && window.pageYOffset >= nextpage.offsetTop - snap) {
                i=0;
                window.scrollTo(0, nextpage.offsetTop);
                whatpage += 1;
                body.style.overflowY = "initial";
            }
    } else if (window.pageYOffset < currentpage.offsetTop - snap && window.pageYOffset > prevpage.offsetTop + snap){
            body.style.overflowY = "hidden";
            i--
            window.scrollTo(0, window.pageYOffset+i);
                if (window.pageYOffset >= prevpage.offsetTop - snap && window.pageYOffset <= prevpage.offsetTop + snap) {
                    i=0;
                    window.scrollTo(0, prevpage.offsetTop);
                    whatpage -= 1;
                    body.style.overflowY = "initial";
                }
        }
}

要完全删除滚动条，只需将其添加到样式表中即可：

::-webkit-scrollbar {
    width: 0px;  
    background: transparent;  
}

创建一个简单的“平滑滚动”（使用JavaScript香草）

2 个答案: