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

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


javascript jquery smooth-scrolling
person Shohidul Alam    schedule 29.02.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

person dasjanik    schedule 29.02.2016