Как временно отключить прокрутку?

Сделайте это просто, добавив класс в тело:

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

Добавьте класс, затем удалите, когда вы хотите снова включить прокрутку, протестированную в IE, FF, Safari и Chrome.

$('body').addClass('stop-scrolling')

Для мобильных устройств вам необходимо обработать событие touchmove:

$('body').bind('touchmove', function(e){e.preventDefault()})

И отвяжите, чтобы снова включить прокрутку. Протестировано в iOS6 и Android 2.3.3.

$('body').unbind('touchmove')

Вот действительно простой способ сделать это:

window.onscroll = function () { window.scrollTo(0, 0); };

Это как-то странно в IE6.

Следующее решение - базовый, но чистый JavaScript (без jQuery):

function disableScrolling(){
    var x=window.scrollX;
    var y=window.scrollY;
    window.onscroll=function(){window.scrollTo(x, y);};
}

function enableScrolling(){
    window.onscroll=function(){};
}

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

Он основан на ответе galambalazs, но с поддержкой сенсорных устройств и реорганизован как один объект с помощью оболочки плагина jquery.

Демо здесь.

В github здесь.

/**
 * $.disablescroll
 * Author: Josh Harrison - aloof.co
 *
 * Disables scroll events from mousewheels, touchmoves and keypresses.
 * Use while jQuery is animating the scroll position for a guaranteed super-smooth ride!
 */

;(function($) {

    "use strict";

    var instance, proto;

    function UserScrollDisabler($container, options) {
        // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
        // left: 37, up: 38, right: 39, down: 40
        this.opts = $.extend({
            handleKeys : true,
            scrollEventKeys : [32, 33, 34, 35, 36, 37, 38, 39, 40]
        }, options);

        this.$container = $container;
        this.$document = $(document);
        this.lockToScrollPos = [0, 0];

        this.disable();
    }

    proto = UserScrollDisabler.prototype;

    proto.disable = function() {
        var t = this;

        t.lockToScrollPos = [
            t.$container.scrollLeft(),
            t.$container.scrollTop()
        ];

        t.$container.on(
            "mousewheel.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll",
            t._handleWheel
        );

        t.$container.on("scroll.disablescroll", function() {
            t._handleScrollbar.call(t);
        });

        if(t.opts.handleKeys) {
            t.$document.on("keydown.disablescroll", function(event) {
                t._handleKeydown.call(t, event);
            });
        }
    };

    proto.undo = function() {
        var t = this;
        t.$container.off(".disablescroll");
        if(t.opts.handleKeys) {
            t.$document.off(".disablescroll");
        }
    };

    proto._handleWheel = function(event) {
        event.preventDefault();
    };

    proto._handleScrollbar = function() {
        this.$container.scrollLeft(this.lockToScrollPos[0]);
        this.$container.scrollTop(this.lockToScrollPos[1]);
    };

    proto._handleKeydown = function(event) {
        for (var i = 0; i < this.opts.scrollEventKeys.length; i++) {
            if (event.keyCode === this.opts.scrollEventKeys[i]) {
                event.preventDefault();
                return;
            }
        }
    };


    // Plugin wrapper for object
    $.fn.disablescroll = function(method) {

        // If calling for the first time, instantiate the object and save
        // reference. The plugin can therefore only be instantiated once per
        // page. You can pass options object in through the method parameter.
        if( ! instance && (typeof method === "object" || ! method)) {
            instance = new UserScrollDisabler(this, method);
        }

        // Instance already created, and a method is being explicitly called,
        // e.g. .disablescroll('undo');
        else if(instance && instance[method]) {
            instance[method].call(instance);
        }

    };

    // Global access
    window.UserScrollDisabler = UserScrollDisabler;

})(jQuery);

Мне жаль отвечать на старый пост, но я искал решение и наткнулся на этот вопрос.

Существует много обходных решений для этой проблемы, чтобы по-прежнему отображать полосу прокрутки, например, предоставить контейнеру высоту 100% и стиль overflow-y: scroll.

В моем случае я просто создал div с полосой прокрутки, которую я показываю при добавлении overflow: hidden к телу:

function disableScroll() {
    document.getElementById('scrollbar').style.display = 'block';
    document.body.style.overflow = 'hidden';
}

Полоса прокрутки элемента должна иметь следующие стили:

overflow-y: scroll; top: 0; right: 0; display: none; height: 100%; position: fixed;

Здесь отображается серая полоса прокрутки, надеюсь, что она поможет будущим посетителям.

Я искал решение этой проблемы, но не был удовлетворен каким-либо из вышеперечисленных решений (как написать этот ответ), поэтому я придумал это решение.

CSS

.scrollDisabled {   
    position: fixed;
    margin-top: 0;// override by JS to use acc to curr $(window).scrollTop()
    width: 100%;
}

JS

var y_offsetWhenScrollDisabled=0;

function disableScrollOnBody(){
    y_offsetWhenScrollDisabled= $(window).scrollTop();
    $('body').addClass('scrollDisabled').css('margin-top', -y_offsetWhenScrollDisabled);
}
function enableScrollOnBody(){
    $('body').removeClass('scrollDisabled').css('margin-top', 0);
    $(window).scrollTop(y_offsetWhenScrollDisabled);
}

По сообщению galambalazs я бы добавил поддержку сенсорных устройств, позволяя нам касаться, но не прокручивать вверх или вниз:

function disable_scroll() {
   ...
   document.ontouchmove = function(e){ 
        e.preventDefault(); 
   }
}

function enable_scroll() {
   ...
   document.ontouchmove = function(e){ 
     return true; 
   }
}

Другое решение:

body {
    overflow-y: scroll;
    width: 100%;
    margin: 0 auto;
}

Таким образом, у вас всегда есть вертикальная полоса прокрутки, но поскольку большая часть моего контента больше, чем область просмотра, это нормально для меня. Содержимое сосредоточено с отдельным div, но без изменения поля снова в теле мой контент останется слева.

Это две функции, которые я использую для показа всплывающих/модальных:

var popup_bodyTop = 0;
var popup_bodyLeft = 0;

function popupShow(id)
{
    $('#'+ id).effect('fade');
    $('#popup-overlay').effect('fade');

    // remember current scroll-position
    // because when setting/unsetting position: fixed to body
    // the body would scroll to 0,0
    popup_bodyLeft = $(document).scrollLeft();
    popup_bodyTop  = $(document).scrollTop();

    // invert position
    var x = - popup_bodyLeft;
    var y = - popup_bodyTop;

    $('body').css('position', 'fixed');
    $('body').css('top', y.toString() +'px');
    $('body').css('left', x.toString() +'px');
}

function popupHide(id)
{
    $('#'+ id).effect('fade');
    $('#popup-overlay').effect('fade');
    $('body').css('position', '');
    $('html, body').scrollTop(popup_bodyTop);
    $('html, body').scrollLeft(popup_bodyLeft);
}

Результат: незапрограммируемый фон и отсутствие повторного позиционирования содержимого из-за левой полосы прокрутки. Протестировано с текущими FF, Chrome и IE 10.

Я использую showModalDialog, чтобы показать дополнительную страницу как модальный диалог.

чтобы скрыть полосы прокрутки главного окна:

document.body.style.overflow = "hidden";

и при закрытии модального диалога, показывающего полосы прокрутки основного окна:

document.body.style.overflow = "scroll";

для доступа к элементам в главном окне из диалогового окна:

parent.document.getElementById('dialog-close').click();

для любого, кто ищет showModalDialog:( после строки 29 исходного кода)

document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
document.body.style.overflow = "hidden";//****
document.getElementById('dialog-close').addEventListener('click', function(e) {
    e.preventDefault();
    document.body.style.overflow = "scroll";//****
    dialog.close();
});

В зависимости от того, что вы хотите достичь с помощью удаленной прокрутки, вы можете просто исправить элемент, из которого вы хотите удалить прокрутку (нажатие или любой другой триггер, который вы хотите временно отключить прокрутку)

Я искал решение "temp no scroll" и для своих нужд, это решило его

создать класс

.fixed{
    position: fixed;
}

затем с помощью JQuery

var someTrigger = $('#trigger'); //a trigger button
var contentContainer = $('#content'); //element I want to temporarily remove scroll from

contentContainer.addClass('notfixed'); //make sure that the element has the "notfixed" class

//Something to trigger the fixed positioning. In this case we chose a button.
someTrigger.on('click', function(){

    if(contentContainer.hasClass('notfixed')){
        contentContainer.removeClass('notfixed').addClass('fixed');

    }else if(contentContainer.hasClass('fixed')){
        contentContainer.removeClass('fixed').addClass('notfixed');
    };
});

Я обнаружил, что это достаточно простое решение, которое хорошо работает во всех браузерах, а также упрощает его использование на портативных устройствах (например, iPhone, планшеты и т.д.). Поскольку элемент временно фиксирован, прокрутки нет:)

ВНИМАНИЕ! В зависимости от размещения вашего элемента contentContainer вам может понадобиться отрегулировать его слева. Это легко сделать, добавив левое значение css в этот элемент, когда активный класс активен.

contentContainer.css({
    'left': $(window).width() - contentContainer.width()/2 //This would result in a value that is the windows entire width minus the element we want to "center" divided by two (since it only pushed from one side)
});

Как насчет этого? (Если вы используете jQuery)

var $window = $(window);
var $body = $(window.document.body);

window.onscroll = function() {
    var overlay = $body.children(".ui-widget-overlay").first();

    // Check if the overlay is visible and restore the previous scroll state
    if (overlay.is(":visible")) {
        var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 };
        window.scrollTo(scrollPos.x, scrollPos.y);
    }
    else {
        // Just store the scroll state
        $body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() });
    }
};

Начиная с Chrome 56 и других современных браузеров, вы должны добавить passive:false в вызов addEventListener, чтобы сделать работу preventDefault. Поэтому я использую это, чтобы остановить прокрутку на мобильном устройстве:

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

function disableScroll(){
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
    document.body.removeEventListener('touchmove', preventDefault, { passive: false });
}

Отмена события, как в принятом ответе, является на мой взгляд ужасным методом:/

Вместо этого я использовал position: fixed; top: -scrollTop(); ниже.

Демо: https://jsfiddle.net/w9w9hthy/5/

Из моего всплывающего проекта jQuery: https://github.com/seahorsepip/jPopup

//Freeze page content scrolling
function freeze() {
    if($("html").css("position") != "fixed") {
        var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
        if(window.innerWidth > $("html").width()) {
            $("html").css("overflow-y", "scroll");
        }
        $("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
    }
}

//Unfreeze page content scrolling
function unfreeze() {
    if($("html").css("position") == "fixed") {
        $("html").css("position", "static");
        $("html, body").scrollTop(-parseInt($("html").css("top")));
        $("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
    }
}

Этот код принимает, ширину, высоту, полосу прокрутки и проблемы со списком страниц.

Возможные проблемы, устраненные с помощью приведенного выше кода:

• width, при установке позиции фиксированная ширина элемента html может быть меньше 100%
• высота, такая же, как указано выше
• полоса прокрутки, когда фиксированная позиция фиксирована, содержимое страницы больше не имеет полосы прокрутки, даже если у нее была полоса прокрутки, прежде чем в результате получилась горизонтальная страничная строка
• pagejump, когда фиксированная позиция фиксирована, scrollTop страницы больше не эффективен, что приводит к вертикальной странице jump

Если у кого есть какие-либо улучшения в коде для замораживания/размораживания страницы, сообщите мне, чтобы я мог добавить эти улучшения в свой проект.

Вот мое решение, чтобы остановить свиток (нет jQuery). Я использую его для отключения прокрутки, когда появляется боковое меню.

<button onClick="noscroll()" style="position:fixed; padding: 8px 16px;">Disable/Enable scroll</button>
<script>
var noscroll_var;
function noscroll(){
  if(noscroll_var){
    document.getElementsByTagName("html")[0].style.overflowY = "";
    document.body.style.paddingRight = "0";
    noscroll_var = false
  }else{
    document.getElementsByTagName("html")[0].setAttribute('style', 'overflow-y: hidden !important');
    document.body.style.paddingRight = "17px";
    noscroll_var = true
  }
}/*noscroll()*/
</script>

<!-- Just to fill the page -->
<script>
  for(var i=0; i <= 80; i++){
    document.write(i + "<hr>")
  }
</script>

Я положил 17px дополнения - право компенсировать исчезновение полосы прокрутки. Но это также проблематично, в основном для мобильных браузеров. Решается путем получения ширины полосы в соответствии с этим.

Все вместе в этом Перо.

Самый простой способ:

$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily

Чтобы отменить это:

$("body").css("overflow", "auto");

Простота в использовании, но единственный недостаток:

• Страница будет немного сдвигаться влево, если она выровнена по центру (по горизонтали).

Это происходит из-за удаления полосы прокрутки, а окно просмотра становится немного шире.

У меня та же проблема, ниже - то, как я ее обрабатываю.

/* file.js */
var body = document.getElementsByTagName('body')[0];
//if window dont scroll
body.classList.add("no-scroll");
//if window scroll
body.classList.remove("no-scroll");

/* file.css */
.no-scroll{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

надеюсь эта помощь.

Основываясь на ответе Шайенна Форбса, и один из них я нашел здесь через fcalderan: Просто отключить прокрутку, не скрывая его? и исправить проблему Hallodom прокрутки полосы прокрутки

CSS

.preventscroll{
    position: fixed;
    overflow-y:scroll;
}

JS:

whatever.onclick = function(){
    $('body').addClass('preventscroll');
}
whatevertoclose.onclick = function(){
    $('body').removeClass('preventscroll');
}

Этот код переводит вас в начало страницы, но я думаю, что код fcalderan имеет обходное решение.

Я знаю, что это старый вопрос, но мне приходилось делать что-то очень похожее, и через некоторое время, когда я искал ответ и пытался использовать разные подходы, я в конечном итоге использовал очень простое решение.

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

Когда я начинаю перемещать свой оверлей на экран, я делаю:

$('body').addClass('stop-scrolling').css('margin-right', 8);

и после того, как я сдвигаю свой оверлей с экрана, я делаю:

$('body').removeClass('stop-scrolling').css('margin-right', 0);

ВАЖНО: это отлично работает, потому что мой оверлей расположен absolute, right: 0px, когда visible.

Это самое простое решение, которое я получил до сих пор. И поверьте мне, я попробовал всех остальных, и это самый простой. Он отлично работает на устройствах Windows, которые подталкивают страницу справа, чтобы иметь место для системной полосы прокрутки и устройств IOS, которые не требуют места для своих полос прокрутки в браузерах. Поэтому, используя это, вам не нужно добавлять прописку справа, чтобы страница не мерцала, когда вы скрываете переполнение тела или html с помощью css.

Решение довольно просто, если вы думаете об этом. Идея состоит в том, чтобы дать window.scrollTop() ту же самую точную позицию в тот момент, когда всплывающее окно открыто. Также измените эту позицию, когда размер окна изменится (когда положение прокрутки изменится после того, как это произойдет).

Итак, мы идем...

Сначала давайте создадим переменную, которая сообщит вам, что всплывающее окно открыто и вызывает его stopWindowScroll. Если мы этого не сделаем, вы получите ошибку неопределенной переменной на своей странице и установите ее в 0 - как неактивную.

$(document).ready(function(){
    stopWindowScroll = 0;
});

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

$(document).on('click','.open-popup', function(){
    // Saving the scroll position once opening the popup.
    stopWindowScrollPosition = $(window).scrollTop();
    // Setting the stopWindowScroll to 1 to know the popup is open.
    stopWindowScroll = 1;
    // Displaying your popup.
    $('.your-popup').fadeIn(300);
});

Итак, следующая вещь, которую мы делаем, это создать функцию всплывающего окна, которую я повторяю снова, может быть любой функцией, которую вы уже создали или используете в плагине. Важно то, что нам нужны эти 2 функции, чтобы установить переменную stopWindowScroll в 1 или 0, чтобы знать, когда она открывается или закрывается.

$(document).on('click','.open-popup', function(){
    // Setting the stopWindowScroll to 0 to know the popup is closed.
    stopWindowScroll = 0;
    // Hiding your popup
    $('.your-popup').fadeOut(300);
});

Затем давайте создадим функцию window.scroll, чтобы мы могли предотвратить прокрутку, как только stopWindowScroll, упомянутый выше, установлен в 1 - как активный.

$(window).scroll(function(){
    if(stopWindowScroll == 1) {
         // Giving the window scrollTop() function the position on which
         // the popup was opened, this way it will stay in its place.
         $(window).scrollTop(stopWindowScrollPosition);
    }
});

Это оно. Для этого не требуется CSS, кроме ваших собственных стилей для страницы. Это работало как прелесть для меня, и я надеюсь, что это поможет вам и другим.

Вот рабочий пример JSFiddle:

Пример скрипта JS

Дайте мне знать, если это поможет. С уважением.

У меня такая же проблема на сенсорных устройствах. Добавление "touch-action: none" к элементу разрешило проблему.

Чтобы получить больше информации. Проверь это:-

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Что-то, что я только что собрал:

jsfiddle

document.onwheel = function(e) {
  // get the target element
  target = e.target;
  // the target element might be the children of the scrollable element
  // e.g., "li"s inside an "ul", "p"s inside a "div" etc.
  // we need to get the parent element and check if it is scrollable
  // if the parent isn't scrollable, we move up to the next parent
  while (target.scrollHeight <= target.clientHeight) {
    // while looping parents, we'll eventually reach document.body
    // since body doesn't have a parent, we need to exit the while loop
    if (target == document.body) {
      break;
    }
    target = target.parentElement;
  }
  // we want this behaviour on elements other than the body
  if (target != document.body) {
    // if the scrollbar is at the top and yet if it still tries to scroll up
    // we prevent the scrolling
    if (target.scrollTop <= 0 && e.deltaY < 0) {
      e.preventDefault();
    }
    // similarly, if the scrollbar is at the bottom and it still tries to scroll down
    // we prevent it
    else if (target.clientHeight + target.scrollTop >= target.scrollHeight && e.deltaY > 0) {
      e.preventDefault();
    }
  }
};

body {
  background: gainsboro;
}

#box {
  width: 300px;
  height: 600px;
  padding: 5px;
  border: 1px solid silver;
  margin: 50px auto;
  background: white;
  overflow: auto;
}

<div id="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Простое решение, которое работало для меня (временно отключив прокрутку окна).

На основе этой скрипты: http://jsfiddle.net/dh834zgw/1/

следующий фрагмент (с использованием jquery) отключит прокрутку окна:

 var curScrollTop = $(window).scrollTop();
 $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');

И в вашем css:

html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

Теперь, когда вы удаляете модальный, не забудьте удалить класс noscroll в теге html:

$('html').toggleClass('noscroll');

Моя проблема в этом вопросе также включает в себя проблему с шириной тела, поскольку, похоже, эта страница немного танцует, когда мы скрываем полосу прокрутки с помощью overflow = "hidden". Следующий код отлично работает для меня и основан на подходе Angular.

element.bind('mouseenter', function() {
    var w = document.body.offsetWidth;
    document.body.style.overflow = 'hidden';
    document.body.style.width = w + 'px';
});

element.bind('mouseleave', function() {
    document.body.style.overflow = 'initial';
    document.body.style.width = 'auto';
});

У меня была аналогичная проблема с анимацией на мобильных экранах, но не на ноутбуках, когда вы пытались анимировать div, используя команду jquery animate. Поэтому я решил использовать таймер, который так часто восстанавливал положение прокрутки окна, что невооруженным глазом документ выглядел бы статическим. Это решение отлично работало на мобильном устройстве с маленьким экраном, например Samsung Galaxy-2 или iphone-5.

Основная логика этого подхода. Таймер, чтобы установить положение прокрутки окна в исходную позицию прокрутки, должен быть запущен перед командой jquery animate, а затем, когда анимация завершена, нам нужно очистить этот таймер (original scroll position - это позиция перед началом анимации).

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

//get window scroll position prior to animation
//so we can keep this position during animation
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;

//NOTE:restoreTimer needs to be global variable
//start the restore timer
restoreTimer = setInterval(function() {
    window.scrollTo(xPosition, yPosition);
}, 1);

//animate the element emt
emt.animate({
    left: "toggle",
    top: "toggle",
    width: "toggle",
    height: "toggle"
}, 500, function() {
    //when animation completes, we stop the timer
    clearInterval(restoreTimer);
});

ДРУГОЕ РЕШЕНИЕ, с которыми работал. На основании ответа Мохаммада Анини в этом сообщении для включения/отключения прокрутки я также обнаружил, что работала модифицированная версия кода, как показано ниже.

//get current scroll position
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;

//disable scrolling
window.onscroll = function() {
    window.scrollTo(xPosition, yPosition);
};

//animate and enable scrolling when animation is completed
emt.animate({
    left: "toggle",
    top: "toggle",
    width: "toggle",
    height: "toggle"
}, 500, function() {
    //enable scrolling when animation is done
    window.onscroll = function() {};
});

Решение galambalazs отлично! Он отлично работал у меня как в Chrome, так и в Firefox. И он также может быть расширен для предотвращения любого события по умолчанию из окна браузера. Скажем, вы делаете приложение на холсте. Вы можете сделать это:

var events = {
  preventDefault: function(e) {
    e = e || window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;  
  },

  //spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36,
  //left: 37, up: 38, right: 39, down: 40
  keys: [32, 33, 34, 35, 36, 37, 38, 39, 40],
  keydown: function(e) {
    for (var i = events.keys.length; i--;) {
      if (e.keyCode === events.keys[i]) {
        events.preventDefault(e);
        return;
      }
    }
  },

  wheel: function(e) {
    events.preventDefault(e);
  },

  disable: function() {
    if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', events.wheel, false);
    }
    window.onmousewheel = document.onmousewheel = events.wheel;
    document.onkeydown = helpers.events.keydown;
  },

  enable: function() {
    if (window.removeEventListener) {
      window.removeEventListener('DOMMouseScroll', events.wheel, false);
    }
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
  }
}

И затем в приложении скажите, что вы собираетесь обрабатывать свои собственные события, такие как мышь, клавиатура, события касания и т.д. Вы можете отключить события по умолчанию, когда мышь заходит внутрь холста и снова активирует их когда мышь гаснет:

function setMouseEvents(canvas) {
  var useCapture = false;

  //Mouse enter event
  canvas.addEventListener('mouseenter', function(event) {
    events.disable();
  }, useCapture);

  //Mouse leave event
  canvas.addEventListener('mouseleave', function(event) {
    events.enable();
  }, useCapture);
}

Вы можете даже отключить контекстное меню с помощью этого хака:

function disableRightClickMenu(canvas) {
  var my_gradient = canvas.context.createLinearGradient(0, 0, 0, 225);
  my_gradient.addColorStop(0, "white");
  my_gradient.addColorStop(1, "white");
  canvas.context.fillStyle = my_gradient;
  canvas.context.fillRect(0, 0, canvas.width, canvas.height);
  canvas.oncontextmenu = function() { return false; };
}

Вы можете заблокировать прокрутку пробела и скрыть панель прокрутки браузера:

$(document).keydown(function(event) {
    if (event.keyCode == 32) {
        return false;

    }
});

document.documentElement.style.overflow = 'hidden';
document.body.scroll = 'no';

Я нашел этот ответ на другом сайте:

Отключить прокрутку:

$( ".popup").live({
    popupbeforeposition: function(event, ui) {
    $("body").on("touchmove", false);
}
});

После закрытия всплывающего окна прокрутки:

$( ".popup" ).live({
    popupafterclose: function(event, ui) {
    $("body").unbind("touchmove");
}
});

Включение следующего CSS с JavaScript поможет. Я не так хорош, как другие, но это сработало для меня.

body {
    position: fixed;
    overflow-y: scroll;
}

Я нашел лучший, но ошибочный способ, сочетающий идею sdleihssirhc:

window.onscroll = function() {
    window.scrollTo(window.scrollX, window.scrollY);
    //Or
    //window.scroll(window.scrollX, window.scrollY);
    //Or Fallback
    //window.scrollX=window.scrollX;
    //window.scrollY=window.scrollY;
};

Я не тестировал его, но позже я отредактирую и дам вам знать. Я на 85% уверен, что он работает с основными браузерами.