2016-02-29 3 views
0

У меня есть проект, в котором я хочу быстро гладкую прокрутку. Я много старался, и я нашел некоторые решения. Но все они не могут прокручиваться, когда я поворачиваю колесико мыши несколько раз за раз, и последний поворот колеса мыши становится гладким. После тонны поиска я получил пример того, чего хочу. Но я не могу понять, что такое функция js. Here is the example. Я не хочу использовать какой-либо плагин, потому что я уже использовал слишком много плагинов в моем проекте, и для этого он загружается так медленно. Возможно ли это только с JQuery или с чистым javascript?быстрый плавный прокрутка на колесе мыши

ответ

1

Это не мое решение, но я думал, что это уместно и очень аккуратно, так что я просто скопировать и вставить его:

jQuery.extend(jQuery.easing, { 
    easeOutQuint: function(x, t, b, c, d) { 
    return c * ((t = t/d - 1) * t * t * t * t + 1) + b; 
    } 
}); 

var wheel = false, 
    $docH = $(document).height() - $(window).height(), 
    $scrollTop = $(window).scrollTop(); 

$(window).bind('scroll', function() { 
    if (wheel === false) { 
    $scrollTop = $(this).scrollTop(); 
    } 
}); 
$(document).bind('DOMMouseScroll mousewheel', function(e, delta) { 
    delta = delta || -e.originalEvent.detail/3 || 
    e.originalEvent.wheelDelta/5; //edit this to your needs - the higher the slower 
    wheel = true; 

    $scrollTop = Math.min($docH, Math.max(0, parseInt($scrollTop - delta * 30))); 
    $($.browser.webkit ? 'body' : 'html').stop().animate({ 
    scrollTop: $scrollTop + 'px' 
    }, 2000, 'easeOutQuint', function() { 
    wheel = false; 
    }); 
    return false; 
}); 

Это переписывает поведение по умолчанию для события прокрутки.
Источник и полные кредиты Скрипка пользователя Szar - скрипка: https://jsfiddle.net/Szar/xmkwa8ft/

P.S. это было найдено в поисковом поиске в 1 мин, используя термин «гладкая прокрутка мыши css»