+7 919 711 99 12
metail@list.ru
  • Шрифт

  • 14

  • 16

  • 18

  • 20

  • 22

14 Ноября 2020

Два способа отключения скролла страницы при наведении курсора на элемент



Элементы на странице

HTML

СветлаяТёмнаяПеренос 
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="style.css" />
<script src="jquery.min.js"></script>
<script src="noscroll.js"></script>
</head>
<body>
<div class="element one"></div>  
<div class="element two"></div>  
<div class="element three"></div> 
<div class="element four"></div> 
<div class="element five"></div> 
<div class="element six"></div> 
<div class="element seven"></div> 
<div class="element eight"></div> 
<div class="element nine"></div>
<div class="element ten"></div>
</body>
</html>

CSS

СветлаяТёмнаяПеренос 
h1 {
  text-align: center;
}
p {
  text-align: center;
  margin: 0;
}
.element {
  width: 200px;
  height: 200px;
  margin: 15px auto;
}
.one {
  background: #0EFF4E;
}
.two {
  background: #FF1418;
}
.three {
  background: #303FE3;
}
.four {
  background: #F4067C;
}
.five {
  background: #02F5EA;
}
.six {
  background: #000000;
}
.seven {
  background: #F1DA06;
}
.eight {
  background: #9D00D0;
}
.nine {
  background: #636363;
}
.ten {
  background: #EF5900;
}


Первый способ

Javascript

СветлаяТёмнаяПеренос 
$(function () {
  $('.element').on('DOMMouseScroll mousewheel', function (ev) {
    var $this = $(this),
      scrollTop = this.scrollTop,
      scrollHeight = this.scrollHeight,
      height = $this.height(),
      delta = (ev.type == 'DOMMouseScroll'
        ? ev.originalEvent.detail * -40
        : ev.originalEvent.wheelDelta),
      up = delta > 0;

    var prevent = function () {
      ev.stopPropagation();
      ev.preventDefault();
      ev.returnValue = false;
      return false;
    }

    if (!up && -delta > scrollHeight - height - scrollTop) {
      // Scrolling down, but this will take us past the bottom.
      $this.scrollTop(scrollHeight);
      return prevent();
    } else if (up && delta > scrollTop) {
      // Scrolling up, but this will take us past the top.
      $this.scrollTop(0);
      return prevent();
    }
  });
});




Второй способ

Javascript

СветлаяТёмнаяПеренос 
$(function () {
  var scrollEvents = ['wheel', 'mousewheel']

  function freezeScroll() {
    for (var i = 0; i < arguments.length; i++) {
      elem = arguments[i];
      let func = preventScrollEventFunc(elem);
      let options = {
        passive: false
      };
      $(elem).on('mouseenter', function () {
        onWheel(window, func, options);
      }).on('mouseleave', function () {
        removeOnWheel(window, func);
      });
    }
  }
  // Отменить скролл страницы, если элемент selector прокручен до упора
  function preventScrollEventFunc(selector) {
    let elem = $(selector);

    function preventScroll(e) {
      let offset = e.wheel || e.wheelDelta;
      let crossingUpper = elem.scrollTop() == 0 && offset > 0;
      let crossingDown = (elem[0].scrollHeight - elem.scrollTop()
        == elem[0].clientHeight && offset < 0);
      if (crossingUpper || crossingDown) {
        e.preventDefault()
      }
    }
    return preventScroll;
  }
  // Повесить обработчик func для событий wheel и mousewheel у elem
  function onWheel(elem, func, options) {
    options = options || {};
    scrollEvents.forEach(function (item, i, arr) {
      elem.addEventListener(item, func, options);
    });
  }
  // Убрать обработчик func для событий wheel и mousewheel у elem
  function removeOnWheel(elem, func, options) {
    options = options || {};
    scrollEvents.forEach(function (item, i, arr) {
      elem.removeEventListener(item, func, options);
    });
  }

  $(document).ready(function () {

    freezeScroll('.element');

  });
});