首页 > 解决方案 > event.preventDefault 不会阻止滚动

问题描述

从 lodash实现该debounce功能后,该功能不再能够阻止用户在网站上滚动。

我试图将debouncelodash 的部分外包给另一个函数,但我无法让它以这种方式工作。

这是代码:

$(document).on('mousewheel DOMMouseScroll', _.debounce(function(event) {

        event.preventDefault();
        var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

        var a= document.getElementsByClassName('mouseScrollAnchor');
        if(wd < 0) {
            for(var i = 0 ; i < a.length ; i++) {
                var t = a[i].getClientRects()[0].top;
                if(t >= 40) break;
            }
        }
        else {
            for(var i = a.length-1 ; i >= 0 ; i--) {
                var t = a[i].getClientRects()[0].top;
                if(t < -20) break;
            }
        }

        if(i >= 0 && i < a.length) {
            $('html,body').animate({
                scrollTop: a[i].offsetTop
            });
        }
    }, 500));

我对该函数的期望:它阻止用户正常滚动,而是应该滚动到锚点列表中的下一个锚点。

它的作用:它确实让用户手动滚动(不应该允许),并且在 0.5 秒后它滚动到锚点。

基本上它按预期工作,除了event.preventDefault部分。

编辑: 它现在正在工作!您可以在下面找到工作代码:

jQuery(document).ready(function($){

    var changeView = function(event){
        var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

        var a= document.getElementsByClassName('mouseScrollAnchor');
        if(wd < 0) {
            for(var i = 0 ; i < a.length ; i++) {
                var t = a[i].getClientRects()[0].top;
                if(t >= 40) break;
            }
        }
        else {
            for(var i = a.length-1 ; i >= 0 ; i--) {
                var t = a[i].getClientRects()[0].top;
                if(t < -20) break;
            }
        }

        if(i >= 0 && i < a.length) {
            $('html,body').animate({
                scrollTop: a[i].offsetTop
            });
        }
    };

    var mousewheelDebounced = _.debounce(changeView, 25);

    $(document).on('mousewheel DOMMouseScroll', function(event) {
        event.preventDefault();
        mousewheelDebounced(event);
    });

    /*...*/

}

标签: javascriptjquerylodashdebounce

解决方案


推荐阅读