event.preventDefault не мешает прокрутке - PullRequest
Новая
       32

event.preventDefault не мешает прокрутке

0 голосов
/ 13 февраля 2019

после реализации функции debounce из lodash функция больше не способна помешать пользователю прокручивать веб-сайт.

Я попытался передать часть debounce lodash в другую функцию, ноЯ не мог заставить его работать таким образом.

Это код: 

$(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);
    });

    /*...*/

}
...