Как программно отключить прокрутку страницы с помощью jQuery

используя jQuery, я хотел бы отключить прокрутку тела:



моя идея состоит в том, чтобы:




  1. Set body{ overflow: hidden;}

  2. захват текущего scrollTop();/scrollLeft()

  3. привязка к событию прокрутки тела, установите scrollTop / scrollLeft на захваченное значение.


есть ли лучший способ?




обновление:



пожалуйста, см. мой пример, и причина, по http://jsbin.com/ikuma4/2/edit



Я знаю, кто-то будет думать "почему он просто не использовать position: fixed на панели?".



пожалуйста, не предлагайте это, поскольку у меня есть другие причины.

1188   22  

22 ответов:

единственный способ я нашел, чтобы сделать это похоже на то, что вы описали:

  1. захватить текущее положение прокрутки (не забудьте горизонтальную ось!).
  2. установите переполнение в скрытое (вероятно, хотите сохранить Предыдущее значение переполнения).
  3. прокрутите документ до сохраненной позиции прокрутки с помощью scrollTo ().

затем, когда вы будете готовы разрешить прокрутку снова, отменить все это.

Edit: нет причин, по которым я не могу дать вам код, так как я пошел проблема в том, чтобы выкопать его...

// 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])
119  
2016-03-14 00:25:04

Это полностью отключить прокрутку:

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

восстановить:

$('html, body').css({
    overflow: 'auto',
    height: 'auto'
});

проверено на Firefox и Chrome.

197  
2016-11-04 15:47:27

попробуй такое

$('#element').on('scroll touchmove mousewheel', function(e){
  e.preventDefault();
  e.stopPropagation();
  return false;
})
41  
2014-06-20 11:07:32

вы можете использовать этот код:

$("body").css("overflow", "hidden");
26  
2012-10-07 12:05:51

Я просто немного настраиваю решение с помощью 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);
}

наконец, позаботьтесь о некоторых возможных начальное значение для полей или отступов.

24  
2017-05-23 15:26:43

чтобы отключить прокрутку попробуйте следующее:

var current = $(window).scrollTop();
$(window).scroll(function() {
    $(window).scrollTop(current);
});

для сброса:

$(window).off('scroll');
16  
2015-04-10 17:31:44

Я написал плагин jQuery для обработки этого:$.disablescroll.

Он предотвращает прокрутку от событий mousewheel, touchmove и keypress, таких как Страницы.

здесь демо здесь.

использование:

$(window).disablescroll();

// To re-enable scrolling:
$(window).disablescroll("undo");
5  
2014-03-28 14:08:45

вы можете прикрепить функцию для прокрутки событий и предотвратить поведение по умолчанию.

var $window = $(window);

$window.on("mousewheel DOMMouseScroll", onMouseWheel);

function onMouseWheel(e) {
    e.preventDefault();
}

https://jsfiddle.net/22cLw9em/

5  
2016-06-18 14:41:53

один лайнер для отключения прокрутки, включая среднюю кнопку мыши.

$(document).scroll(function () { $(document).scrollTop(0); });

edit: в любом случае нет необходимости в jQuery, ниже того же, что и выше в vanilla JS(это означает отсутствие фреймворков, только JavaScript):

document.addEventListener('scroll', function () { this.documentElement.scrollTop = 0; this.body.scrollTop = 0; })

этого.функцию documentelement.scrollTop-standard

этого.тело.scrollTop-IE совместимость

4  
2016-03-14 00:21:25

не можете ли вы просто установить высоту тела на 100% и переполнение скрыто? См.http://jsbin.com/ikuma4/13/edit

3  
2011-05-17 08:59:19

Это может или не может работать для ваших целей, но вы можете продлить jScrollPane чтобы запустить другие функции, прежде чем он делает его прокрутку. Я только что проверил это немного, но я могу подтвердить, что вы можете прыгать и полностью предотвратить прокрутку. Все, что я сделал, было:

  • скачать демо zip:http://github.com/vitch/jScrollPane/archives/master
  • откройте демо" события " (events.html)
  • изменить его, чтобы использовать не минифицированный скрипт: <script type="text/javascript" src="script/jquery.jscrollpane.js"></script>
  • внутри jquery.jscrollpane.js, вставить "return;" в строке 666 (благоприятный номер строки! но в случае, если ваша версия немного отличается, это первая строка positionDragY(destY, animate) функции

запуск событий.html, и вы увидите нормально прокручиваемое поле, которое из-за вашего вмешательства в кодирование не будет прокручиваться.

таким образом можно управлять полосами прокрутки всего браузера (см. fullpage_scroll.формат HTML.)

Так, предположительно, следующим шагом является добавление вызова к какой-либо другой функции, которая отключается и выполняет вашу магию привязки, а затем решает, продолжать ли прокрутку или нет. У вас также есть вызовы API для установки scrollTop и scrollLeft.

Если вам нужна дополнительная помощь, напишите, где вы встаете!

надеюсь, что это помогло.

2  
2011-05-17 08:37:12

Я поставил ответ, который может помочь здесь: в jQuery simplemodal отключить прокрутку

Он показывает, как отключить полосы прокрутки без смещения текст вокруг. Вы можете игнорировать части о simplemodal.

2  
2017-05-23 15:10:54

кто-то опубликовал этот код, который имеет проблему не сохранения позиции прокрутки при восстановлении. Причина в том, что люди склонны применять его к html и телу или только к телу, но он должен применяться только к html. Таким образом, при восстановлении положение прокрутки будет сохранено:

$('html').css({
    'overflow': 'hidden',
    'height': '100%'
});

восстановить:

$('html').css({
    'overflow': 'auto',
    'height': 'auto'
});
2  
2015-09-07 18:48:27
  • Чтобы Скрыть Прокрутку:$("body").css("overflow", "hidden");
  • Для Восстановления Прокрутки:$("body").css("overflow", "initial");
2  
2017-10-19 00:34:46

Если вы просто хотите отключить прокрутку с помощью навигации по клавиатуре, вы можете переопределить событие keydown.

$(document).on('keydown', function(e){
    e.preventDefault();
    e.stopPropagation();
});
1  
2015-07-27 16:14:45

попробуйте этот код:

    $(function() { 
        // ...

        var $body = $(document);
        $body.bind('scroll', function() {
            if ($body.scrollLeft() !== 0) {
                $body.scrollLeft(0);
            }
        });

        // ...
    });
1  
2016-06-28 04:39: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();
}
0  
2012-10-16 02:07:09

для людей, которые имеют центрированные макеты (через 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

Edit: обратите внимание, что я понятия не имею, насколько плохо это может работать (Читай: взрыв) на сенсорном устройстве.

0  
2013-04-17 04:59:48

вы также можете использовать DOM для этого. Скажем, у вас есть функция, которую вы вызываете следующим образом:

function disable_scroll() {
document.body.style.overflow="hidden";
}

и это все! Надеюсь, это поможет в дополнение ко всем другим ответам!

0  
2014-05-01 00:52:53

вот что я делал:

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");
});
0  
2014-07-21 09:37:11

Не уверен, что кто-то пробовал мое решение. Это работает на всем теле / html, но, без сомнения, он может быть применен к любому элементу, который запускает событие прокрутки.

просто установите и снимите блокировку прокрутки, как вам нужно.

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

надеюсь, что это поможет кому-то.

0  
2014-11-20 11:40:51

Я думаю, что лучшее и чистое решение:

window.addEventListener('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y);
});

и с jQuery:

$(window).on('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y)
})

эти прослушиватели событий должны блокировать прокрутку. Просто удалите их, чтобы повторно включить прокрутку

0  
2018-06-20 16:36:56

Comments

    Ничего не найдено.
Click here to cancel reply.