Как программно отключить прокрутку страницы с помощью jQuery
Используя jQuery, я хотел бы отключить прокрутку тела:
Моя идея:
- Установить
body{ overflow: hidden;}
- Захват текущего
scrollTop();/scrollLeft()
- Привяжите к событию прокрутки тела, установите scrollTop/scrollLeft на захваченное значение.
Есть ли лучший способ?
Update:
См. мой пример и причину, по которой http://jsbin.com/ikuma4/2/edit
Я знаю, что кто-то подумает: "Почему он не просто использует position: fixed на панели?".
Пожалуйста, не предлагайте это, поскольку у меня есть другие причины.
Ответы
Ответ 1
Единственный способ, которым я нашел это, похож на то, что вы описали:
- Захватите текущую позицию прокрутки (не забудьте о горизонтальной оси!).
- Установите переполнение в скрытое (возможно, нужно сохранить предыдущее значение переполнения).
- Прокрутите документ до сохраненного положения прокрутки с помощью scrollTo().
Затем, когда вы будете готовы разрешить прокрутку снова, отмените все это.
Изменить: нет причин, по которым я не могу дать вам код, так как я пошел на труд, чтобы выкопать его...
// lock scroll position, but retain settings for later
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
// un-lock scroll position
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1])
Ответ 2
Это будет полностью отключить прокрутку:
$('html, body').css({
overflow: 'hidden',
height: '100%'
});
Для восстановления:
$('html, body').css({
overflow: 'auto',
height: 'auto'
});
Протестировано в Firefox и Chrome.
Ответ 3
попробуйте это
$('#element').on('scroll touchmove mousewheel', function(e){
e.preventDefault();
e.stopPropagation();
return false;
})
Ответ 4
вы можете использовать этот код:
$("body").css("overflow", "hidden");
Ответ 5
Я просто немного настраиваю решение tfe. В частности, я добавил некоторый дополнительный элемент управления, чтобы убедиться, что нет смещения содержимого страницы (или сдвиг страницы), когда полоса прокрутки установлена на hidden.
Две функции Javascript lockScroll() и unlockScroll() могут быть определены, соответственно, для блокировки и разблокировки прокрутки страницы.
function lockScroll(){
$html = $('html');
$body = $('body');
var initWidth = $body.outerWidth();
var initHeight = $body.outerHeight();
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
$html.data('scroll-position', scrollPosition);
$html.data('previous-overflow', $html.css('overflow'));
$html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
var marginR = $body.outerWidth()-initWidth;
var marginB = $body.outerHeight()-initHeight;
$body.css({'margin-right': marginR,'margin-bottom': marginB});
}
function unlockScroll(){
$html = $('html');
$body = $('body');
$html.css('overflow', $html.data('previous-overflow'));
var scrollPosition = $html.data('scroll-position');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
$body.css({'margin-right': 0, 'margin-bottom': 0});
}
где я предположил, что <body> не имеет начального поля.
Обратите внимание, что, хотя вышеупомянутое решение работает в большинстве практических случаев, оно не является окончательным, поскольку для дальнейшей работы с страницами, которые включают, например, заголовок с position:fixed, требуется дополнительная настройка. Перейдем к этому частному случаю с примером. Предположим, что
<body>
<div id="header">My fixedheader</div>
<!--- OTHER CONTENT -->
</body>
с
#header{position:fixed; padding:0; margin:0; width:100%}
Тогда в функциях lockScroll() и unlockScroll() следует добавить следующее:
function lockScroll(){
//Omissis
$('#header').css('margin-right', marginR);
}
function unlockScroll(){
//Omissis
$('#header').css('margin-right', 0);
}
Наконец, позаботьтесь о каком-то возможном начальном значении для полей или paddings.
Ответ 6
Чтобы отключить прокрутку, попробуйте следующее:
var current = $(window).scrollTop();
$(window).scroll(function() {
$(window).scrollTop(current);
});
до reset:
$(window).off('scroll');
Ответ 7
Я написал плагин jQuery для этого: $. disablescroll.
Он предотвращает прокрутку с колесика мыши, нажатия и нажатия клавиш, например Page Down.
Здесь есть демонстрация.
Использование:
$(window).disablescroll();
// To re-enable scrolling:
$(window).disablescroll("undo");
Ответ 8
Вы можете присоединить функцию для прокрутки событий и предотвращения ее поведения по умолчанию.
var $window = $(window);
$window.on("mousewheel DOMMouseScroll", onMouseWheel);
function onMouseWheel(e) {
e.preventDefault();
}
https://jsfiddle.net/22cLw9em/
Ответ 9
Один лайнер для отключения прокрутки, включая среднюю кнопку мыши.
$(document).scroll(function () { $(document).scrollTop(0); });
edit. В любом случае, нет необходимости в jQuery, ниже того же, что указано выше в vanilla JS (это означает отсутствие фреймворков, просто JavaScript):
document.addEventListener('scroll', function () { this.documentElement.scrollTop = 0; this.body.scrollTop = 0; })
this.documentElement.scrollTop - стандартный
this.body.scrollTop - совместимость с IE
Ответ 10
Разве вы не можете установить высоту тела на 100% и переполнение? См. http://jsbin.com/ikuma4/13/edit
Ответ 11
Это может работать или не работать в ваших целях, но вы можете расширить jScrollPane, чтобы запустить другие функции, прежде чем прокручивать их. Я только что проверил это немного, но я могу подтвердить, что вы можете прыгать и полностью предотвращать прокрутку. Все, что я сделал, это:
- Загрузите демо-версию zip: http://github.com/vitch/jScrollPane/archives/master
- Откройте демонстрацию "Events" (events.html)
- Отредактируйте его, чтобы использовать недопустимый script источник:
<script type="text/javascript" src="script/jquery.jscrollpane.js"></script>
- Внутри jquery.jscrollpane.js введите "return;" на строке 666 (благоприятный номер строки!, но если ваша версия немного отличается, это первая строка функции
positionDragY(destY, animate)
Запустите event.html, и вы увидите окно с обычной прокруткой, которое из-за вашего вмешательства кодирования не будет прокручиваться.
Вы можете управлять всеми полосами прокрутки браузера таким образом (см. fullpage_scroll.html).
Итак, предположим, следующим шагом является добавление вызова какой-либо другой функции, которая отключается, и делает вашу привязанную магию, а затем решает, продолжать ли прокрутку или нет. У вас также есть вызовы API для установки scrollTop и scrollLeft.
Если вам нужна дополнительная помощь, напишите, где вы встаете!
Надеюсь, это помогло.
Ответ 12
Я поставил ответ, который может помочь здесь:
jQuery упрощающая прокрутка прокрутки
Показывает, как отключить полосы прокрутки, не перемещая текст вокруг. Вы можете игнорировать части, касающиеся простой модели.
Ответ 13
Кто-то отправил этот код, который имеет проблему не сохранять позицию прокрутки при восстановлении. Причина в том, что люди склонны применять его к html и телу или только к телу, но его следует применять только к html. Таким образом, при восстановлении положение прокрутки будет сохранено:
$('html').css({
'overflow': 'hidden',
'height': '100%'
});
Для восстановления:
$('html').css({
'overflow': 'auto',
'height': 'auto'
});
Ответ 14
Если вы просто хотите отключить прокрутку с помощью навигации на клавиатуре, вы можете переопределить событие keydown.
$(document).on('keydown', function(e){
e.preventDefault();
e.stopPropagation();
});
Ответ 15
Попробуйте этот код:
$(function() {
// ...
var $body = $(document);
$body.bind('scroll', function() {
if ($body.scrollLeft() !== 0) {
$body.scrollLeft(0);
}
});
// ...
});
Ответ 16
Вы можете скрывать окно с помощью прокручиваемого div для предотвращения прокрутки содержимого на странице.
И, скрывая и показывая, вы можете заблокировать/разблокировать свой свиток.
Сделайте что-то вроде этого:
#scrollLock {
width: 100%;
height: 100%;
position: fixed;
overflow: scroll;
opacity: 0;
display:none
}
#scrollLock > div {
height: 99999px;
}
function scrollLock(){
$('#scrollLock').scrollTop('10000').show();
}
function scrollUnlock(){
$('#scrollLock').hide();
}
Ответ 17
Для людей, которые имеют центрированные макеты (через margin:0 auto;), здесь создается размытие решения position:fixed и предлагаемое решение @tfe.
Используйте это решение, если вы испытываете перехват страниц (из-за того, что полоса прокрутки отображается/скрывается).
// lock scroll position, but retain settings for later
var scrollPosition = [
window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
var $html = $('html'); // bow to the demon known as MSIE(v7)
$html.addClass('modal-noscroll');
$html.data('scroll-position', scrollPosition);
$html.data('margin-top', $html.css('margin-top'));
$html.css('margin-top', -1 * scrollPosition[1]);
... в сочетании с...
// un-lock scroll position
var $html = $('html').removeClass('modal-noscroll');
var scrollPosition = $html.data('scroll-position');
var marginTop = $html.data('margin-top');
$html.css('margin-top', marginTop);
window.scrollTo(scrollPosition[0], scrollPosition[1])
... и, наконец, CSS для .modal-noscroll...
.modal-noscroll
{
position: fixed;
overflow-y: scroll;
width: 100%;
}
Я бы рискнул сказать, что это скорее правильное решение, чем любое другое решение, но я еще не тестировал его еще...: P
Изменить: обратите внимание, что я не знаю, как это могло бы сильно (читать: взорвать) на сенсорном устройстве.
Ответ 18
Вы также можете использовать DOM для этого. Скажем, у вас есть функция, которую вы вызываете так:
function disable_scroll() {
document.body.style.overflow="hidden";
}
И это все! Надеюсь, это поможет в дополнение ко всем остальным ответам!
Ответ 19
Вот что я сделал:
CoffeeScript:
$("input").focus ->
$("html, body").css "overflow-y","hidden"
$(document).on "scroll.stopped touchmove.stopped mousewheel.stopped", (event) ->
event.preventDefault()
$("input").blur ->
$("html, body").css "overflow-y","auto"
$(document).off "scroll.stopped touchmove.stopped mousewheel.stopped"
JavaScript:
$("input").focus(function() {
$("html, body").css("overflow-y", "hidden");
$(document).on("scroll.stopped touchmove.stopped mousewheel.stopped", function(event) {
return event.preventDefault();
});
});
$("input").blur(function() {
$("html, body").css("overflow-y", "auto");
$(document).off("scroll.stopped touchmove.stopped mousewheel.stopped");
});
Ответ 20
Не уверен, что кто-то опробовал мое решение. Это работает на всем теле /html, но, без сомнения, его можно применить к любому элементу, который запускает событие прокрутки.
Просто установите и отключите scrollLock по мере необходимости.
var scrollLock = false;
var scrollMem = {left: 0, top: 0};
$(window).scroll(function(){
if (scrollLock) {
window.scrollTo(scrollMem.left, scrollMem.top);
} else {
scrollMem = {
left: self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
top: self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
};
}
});
Вот пример JSFiddle
Надеюсь, это поможет кому-то.
Ответ 21
- Скрыть свиток:
$("body").css("overflow", "hidden");
- Чтобы восстановить прокрутку:
$("body").css("overflow", "initial");
