Отключить колесико мыши с помощью protectDefault, но не можете его включить? - PullRequest
Новая
       29

Отключить колесико мыши с помощью protectDefault, но не можете его включить?

1 голос
/ 17 февраля 2020

У меня есть 2 кнопки для включения / отключения колесика мыши, как показано ниже. Я отключил его, но не могу снова включить 

function disableScroll() {
  document.addEventListener("mousewheel", function(event) {
    event.preventDefault();
  }, {
    passive: false
  });
}

function enableScroll() {
  document.removeEventListener("mousewheel", function(event) {
    event.preventDefault();
  }, {
    passive: false
  });
}
<button onclick="disableScroll()">Disable</button>
<button onclick="enableScroll()">Enale</button>

1 Ответ

3 голосов
/ 17 февраля 2020

Проблема с вашими текущими логи c заключается в том, что добавляемый вами обработчик событий и удаленный обработчик событий не совпадают. Чтобы решить эту проблему, поместите обработчик событий в его собственную именованную функцию и назовите его. 

let disabledScrollHandler = (e) => {
  e.preventDefault();
}

document.querySelector('#disable').addEventListener('click', () => 
  document.addEventListener('mousewheel', disabledScrollHandler, { passive: false }));

document.querySelector('#enable').addEventListener('click', () => 
  document.removeEventListener('mousewheel', disabledScrollHandler, { passive: false }));
html,
body {
  height: 1000px;
}
<button id="disable">Disable</button>
<button id="enable">Enable</button>

Тем не менее, вы можете достичь этого без вложенных и динамических обработчиков c событий, добавив класс в body. Это class устанавливает состояние overflow элемента, что, в свою очередь, предотвращает поведение прокрутки. Попробуйте это: 

document.querySelector('#disable').addEventListener('click', function() {
  document.body.classList.add('disable-scroll');
});

document.querySelector('#enable').addEventListener('click', function() {
  document.body.classList.remove('disable-scroll');
});
html, body { height: 1000px; }
body.disable-scroll { overflow: hidden; }
<button id="disable">Disable</button>
<button id="enable">Enable</button>

Обратите внимание, что последний подход также предотвращает прокрутку с помощью клавиатуры, если это необходимо.

...