Плавная прокрутка для всей веб-страницы - PullRequest
Новая
       44

Плавная прокрутка для всей веб-страницы

1 голос
/ 05 апреля 2020

Я пытаюсь добавить плавную прокрутку на мой сайт. Большинство из вас думают о плавной прокрутке анимации при нажатии на кнопку. Но нет! Это не то, чего я хочу достичь. Когда пользователь нажимает клавишу вниз, верхнюю клавишу или прокручивает колесо мыши, я хочу сделать плавную анимацию до точки, до которой он прокручивается. Я знаю, что это возможно. На этом сайте вы можете получить чистый ванильный код javascript при оформлении годовой подписки: http://www.smoothscroll.net/. И я знаю, что это работает, потому что я уже видел это на других сайтах. Моя идея достичь этого самостоятельно: 

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/*                                 S M O O T H  S C R O L L                                    */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
  e.preventDefault();
}

function preventDefaultForScrollKeys(e) {
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
}

var supportsPassive = false;
try {
  window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
    get: function () { supportsPassive = true; }
  }));
} catch(e) {}

var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';

// call this to Disable
function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
  window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
  window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// call this to Enable
function enableScroll() {
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
  window.removeEventListener('touchmove', preventDefault, wheelOpt);
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

disableScroll();

Это ответ переполнения стека. Вы можете найти ответ здесь: { ссылка }. Проблема сейчас: мне нужно выяснить, сколько пользователь прокручивал и чем я мог прокрутить его с помощью скрипта. Но как? Или есть другое решение или библиотека, которую мы можем использовать?

...