Запрет прокрутки
Здравствуйте.
Подскажите, как можно запретить прокрутку (не убирая сами полосы прокрутки, чтобы контент не скакал)? Идея такая: https://jsfiddle.net/Novitsky/77z57xfk/. Надо, чтобы при появлении меню прокрутка контента на заднем плане была заблокирована. overflow:hidden не подойдет, чтобы полоса прокрутки не убиралась. |
<div style="height:2000px;"></div> <script> window.onscroll = () => window.scrollTo(0, 0); </script> |
Спасибо.
Протестировал: https://jsfiddle.net/Novitsky/zf4qv89L/. Я вставил эту строчку в свой скрипт — работает, но наполовину. Как сделать, чтобы при удалении класса прокрутка снова начинала работать? |
Небольшой пример.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<style>
div{
height : 2000px;
border : 1px solid black;
}
</style>
<script>
$(function () {
$('.nav-icon').click(function () {
$('body').toggleClass('nav-active');
});
$('body').on({
'mousewheel': function (e) {
if ($('body').hasClass('nav-active')){
e.preventDefault();
e.stopPropagation();
}
}
})
})
</script>
<div class="nav-icon"><span><span class="invisible">Меню</span></span></div>
</body>
</html>
|
Спасибо большое. Теперь работает, как надо.
|
Тут вот подумал. Ради интереса, раз пошла такая пьянка. А можно до кучи запретить стрелки, PgUp, PgDn, Home, End и пробел, и разрешить удаление класса nav-active по Esc'пу?
|
В инете нашел один скриптик:
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
Запихнул в свой:
$('.nav-icon').click(function() {
$('body').toggleClass('nav-active');
});
$('body').on({
'mousewheel': function(e) {
if ($('body').hasClass('nav-active')) {
e.preventDefault();
e.stopPropagation();
}
}
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
})
Не работает.Я понимаю, что сделал что-то не так, но у меня практически нулевые познания в JS. Да и громоздкое какое-то решение, и события по Esc'пу в нем нет. ( И всякие //older FF и //older browsers мне ни к чему. |
Szorstki,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<style>
div {
height: 2000px;
border: 1px solid black;
}
</style>
<script>
$(function () {
var keys = { 37: 1, 38: 1, 39: 1, 40: 1, 32: 1, 36 : 1, 35: 1 };
$('.nav-icon').click(function () {
$('body').toggleClass('nav-active');
});
$('body').on({
'mousewheel': function (e) {
if ($('body').hasClass('nav-active')){
e.preventDefault();
e.stopPropagation();
}
},
'keydown': function (e) {
var key = e.keyCode
if (keys[key] && $('body').hasClass('nav-active')) {
e.preventDefault();
e.stopPropagation();
}
if (key == 27) {
$('body').removeClass('nav-active')
}
}
})
})
</script>
<div class="nav-icon"><span><span class="invisible">Меню</span></span></div>
</body>
</html>
|
Вообще суперски. Все работает. Спасибо!
|
Только что проверил еще раз. Странно, почему-то в Firefox'е не блокирует прокрутку. С остальным все в порядке.
P. S. Вообще с последней версией FF какая-то фигня. И Flexbox стал некорректно работать. |
| Часовой пояс GMT +3, время: 02:08. |