Гладкая прокрутка jQuery

Я делаю сайт parallax, и я хотел бы сделать прокрутку страницы более гладкой с колесиком мыши для лучшего удобства пользователя. Лучший пример, который я мог получить, - это этот веб-сайт: http://www.milwaukeepolicenews.com/#menu=home-page Было бы здорово, если бы я мог получить что-то похожее на это на моем сайте, гладкую вертикальную прокрутку и инерцию прокрутки.

Я заметил, что они используют мышь Брендона Аарона jQuery, которая очень легкая, но я просто новичок и не могу заставить ее работать сам.

Также я заметил это в своем файле mpd-parallax.js:

jQuery(window).mousewheel(function(event, delta, deltaX, deltaY){
        if(delta < 0) page.scrollTop(page.scrollTop() + 65);
        else if(delta > 0) page.scrollTop(page.scrollTop() - 65);
        return false;
    })

Спасибо!

ИЗМЕНИТЬ

Я почти там. Взгляните на эту скрипту: http://jsfiddle.net/gmelcul/cZuym/ Ему нужно только добавить метод ослабления для прокрутки, как на сайте полиции Милуоки.

Ответы

Ответ 1

Вот два jsfiddles - один с script и один без него, чтобы вы могли сравнить:

JavaScript с помощью jQuery mousewheel plugin:

$(document).ready(function() {
    var page = $('#content');  // set to the main content of the page   
    $(window).mousewheel(function(event, delta, deltaX, deltaY){
        if (delta < 0) page.scrollTop(page.scrollTop() + 65);
        else if (delta > 0) page.scrollTop(page.scrollTop() - 65);
        return false;
    })
});

Сравните эти два. Из того, что я могу сказать, script замедляет колесо мыши, поэтому требует более физического поворота для прокрутки того же расстояния, что и без script. Он может чувствовать себя более плавным из-за более медленной прокрутки (и это может быть более плавным, поскольку, вероятно, это легче сделать на графическом устройстве).

Ответ 2

Я знаю это действительно старое сообщение, но вот хорошее решение, которое я сделал:

function handle(delta) {
    var animationInterval = 20; //lower is faster
  var scrollSpeed = 20; //lower is faster

    if (end == null) {
    end = $(window).scrollTop();
  }
  end -= 20 * delta;
  goUp = delta > 0;

  if (interval == null) {
    interval = setInterval(function () {
      var scrollTop = $(window).scrollTop();
      var step = Math.round((end - scrollTop) / scrollSpeed);
      if (scrollTop <= 0 || 
          scrollTop >= $(window).prop("scrollHeight") - $(window).height() ||
          goUp && step > -1 || 
          !goUp && step < 1 ) {
        clearInterval(interval);
        interval = null;
        end = null;
      }
      $(window).scrollTop(scrollTop + step );
    }, animationInterval);
  }
}

Проверьте это: http://jsfiddle.net/y4swj2ts/3/

Ответ 3

Отъезд skrollr. Это плагин для создания эффекта параллакса. У него есть опции, когда вы инициализируете плагин для переключения плавной прокрутки:

var s = skrollr.init({
    smoothScrolling: true,
    smoothScrollingDuration: 1800
});

Ответ 4

Эй, у меня есть еще один ресурс, который действительно прост в использовании smoothwheel

Это позволяет плавно прокручивать анимацию на колесиках мыши на всех устройствах и работать отлично!

Ответ 5

Я нашел этот плагин, у него есть несколько приятных опций и работает на всех основных устройствах http://areaaperta.com/nicescroll/