@stFest

Прокрутка блока колесом мыши продолжает работать за пределами блока. Как исправить?

Есть два блока на странице. Они ограничены по высоте, поэтому использую прокрутку внутри, когда текст слишком большой. Проблема в том, что прокрутка блока работает, даже если крутить колесико мыши, когда курсор за пределами блока. А так как на странице два блока, то они оба начинают прокручиваться. Как сделать, чтобы работало только когда курсор внутри блока? Использую вот этот код, но ошибку не понимаю:
$('div.rl-desc').hover(function(){
          function addHandler(object, event, handler) {
          if (object.addEventListener) {
            object.addEventListener(event, handler, false);
          }
          else if (object.attachEvent) {
            object.attachEvent('on' + event, handler);
          }
          }
          addHandler(window, 'DOMMouseScroll', wheel);

          addHandler(window, 'mousewheel', wheel);
          
          function wheel(event) {
          var delta; 
          event = event || object.event;
          if (event.wheelDelta) { 
            delta = event.wheelDelta / 120;
            if (window.opera) delta = -delta;
          }
          else if (event.detail) {
            delta = -event.detail / 3;
          }
          if (event.preventDefault) event.preventDefault();
          event.returnValue = false;
          console.log(delta);
          if(delta == 1){
            $('div.rl-desc').scrollTo('-=20px');
          }
          else{
            $('div.rl-desc').scrollTo('+=20px');
          }
          }
        return false;
      });
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
Deonisius
@Deonisius
Родился в 11110110111 году, 11000 января.
Как вариант:
const getDelta = e =>  (e = window.event || e) && e.wheelDelta ? e.wheelDelta / 120 : -e.detail / 3;

$('div.rl-desc').on('mousewheel DOMMouseScroll', function(e) {
  e.preventDefault();
  $(this).scrollTo(getDelta(e) > 0 ? '-=20' : '+=20');
});
Хотя, многое (если не всё) тут для меня загадка, но вам видней.

P.S. Забыл сразу функцию переписать на ES5 (на всякий случай):
var getDelta = function getDelta(e) {
  e = window.event || e;
  return e.wheelDelta ? e.wheelDelta / 120 : -e.detail / 3;
};
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы