创建一个简单的“平滑滚动”（使用 javascript vanilla）

Question

我一直在尝试使用在鼠标滚轮上触发的 location.href 来制作一个简单的“smoothscroll”功能。主要问题是 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 之类的库中，但如果使用这样的库太不vanilla 对于您的想法，您始终可以定义自己的 debounce 函数：https://www.geeksforgeeks.org/debouncing-in-javascript/

您可能还想查看requestanimationframe。

Answer 2

不同的方法 好吧，在摆弄了大约 2 天后，我感到沮丧并重新开始。无论我做什么，浏览器集成的“滑动滚动”都会弄乱事件触发器。无论如何，我决定自己制作滚动动画，老实说它比我想象的要好：如果有人想这样做，这是我的代码：

    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;  
}