Два способа отключения скролла страницы при наведении курсора на элемент
Шрифт
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(); } }); });
Cкачиваний: 540 Размер: 0.03 МБ
Второй способ
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'); }); });
Cкачиваний: 528 Размер: 0.03 МБ