плавная прокрутка вертикального колесика мыши jquery

Я делаю сайт с параллаксом, и я хотел бы сделать прокрутку страницы более плавной с помощью колесика мыши для лучшего взаимодействия с пользователем. Лучшим примером, который я смог получить, был этот веб-сайт: 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/ Требуется только добавить метод ослабления в прокрутите так же, как на веб-сайте полиции Милуоки.


person gigi melcul    schedule 16.02.2013    source источник
comment
Покажите, что вы пробовали до сих пор - иначе сложно что-то предложить.   -  person    schedule 16.02.2013
comment
Он действительно нуждается в ослаблении, в Firefox и Chrome это отрывисто, но, как ни странно, он работает очень хорошо и плавно в IE10.   -  person gigi melcul    schedule 16.02.2013
comment
Возможный дубликат: stackoverflow.com/questions/9142490/   -  person Anderson Green    schedule 02.04.2013
comment
@gigimelcul Можете ли вы опубликовать все свое решение (с методом ослабления) в качестве ответа? Я буду рад проголосовать, так как это работает достаточно хорошо.   -  person Cthulhu    schedule 04.10.2013
comment
stackoverflow.com/questions/20542586 /   -  person Ana El Bembo    schedule 14.05.2014


Ответы (5)


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

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/

person user5863872    schedule 03.03.2016

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

JavaScript с использованием подключаемого модуля jQuery mousewheel:

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

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

person Cymen    schedule 16.02.2013
comment
Вы также можете прокручивать его с помощью клавиш со стрелками (и было бы удобнее прокручивать с помощью клавиш со стрелками, а также колесика мыши). jsfiddle.net/aVvQF/4 - person Anderson Green; 02.04.2013
comment
@DavidMartins Я тоже предпочитаю его без, но вопрос был не в этом :). - person Cymen; 21.04.2015

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

var s = skrollr.init({
    smoothScrolling: true,
    smoothScrollingDuration: 1800
});
person atomicrabbit    schedule 29.07.2013
comment
Это выглядит многообещающе. Спасибо! - person OMA; 18.01.2015

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

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

person GBM    schedule 22.10.2014
comment
К сожалению, ни демонстрация на сайте SmoothWheel, ни рабочая демонстрация, на которую вы ссылаетесь в конце, вообще не работают в Chrome 39. Прокрутка по-прежнему является обычным прыжком блока при перемещении колеса на ступеньку. С другой стороны, упомянутая выше библиотека skrollr работает в Chrome 39. - person OMA; 18.01.2015