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

Я использую плагин scrollTo jQuery и хотел бы знать, можно ли как-то временно отключить прокрутку элемента окна через Javascript? Причина, по которой я хотел бы отключить прокрутку, заключается в том, что при прокрутке во время анимации scrollTo она становится действительно уродливой ;)

конечно, я мог бы сделать $("body").css("overflow", "hidden"); а затем верните его в авто, когда анимация остановится, но было бы лучше, если бы полоса прокрутки была все еще видна, но неактивна.

30 ответов


на scroll событие нельзя отменить. Но вы можете сделать это отмена эти события взаимодействия:
мышь & Touch scroll и кнопки связанный с прокруткой.

[рабочая демо]

// 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;  
}

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

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

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

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

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

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

и unbind для повторного включения прокрутки. Протестировано в iOS6 и Android 2.3.3

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

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

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

Это вроде Джампи в IE6.


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

Он основан на 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);

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

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

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

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

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

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

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

элемент scrollbar должен иметь следующие стили:

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

Это показывает серый прокрутки, надеюсь, это поможет будущим посетителям.


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

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

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

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

в 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);
}

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

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.


Как насчет этого? (Если вы используете 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() });
    }
};

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

Я искал решение "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');
    };
});

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

внимание! В зависимости от размещения элемента "contentContainer" вам может потребоваться настроить его слева. Что можно легко сделать, добавив значение css left к этому элементу, когда фиксированный класс активен

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's only pushed from one side)
});

Я использую 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();
});

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

Я 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": ""});
    }
}

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

возможные проблемы, решенные выше код:

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

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


начиная с 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 });
}

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

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.


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

/* 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;
}

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


самый простой способ-это:

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

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

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

легко реализовать, но единственным недостатком является:

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

это связано с тем, что полоса прокрутки удаляется, а окно просмотра становится немного шире.


вот мое решение, чтобы остановить прокрутку (без 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 заполнения-право, чтобы компенсировать исчезновение полосы прокрутки. Но это также проблематично, в основном для мобильных браузеров. Решается путем получения ширины полосы в соответствии с этой.

все вместе, в эту ручку.


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

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

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

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

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

решение 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; };
}

у меня была аналогичная проблема анимации на мобильных экранах, но не на ноутбуках, при попытке анимировать 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() {};
});

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

на основе этой скрипки: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');

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

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>

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

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

    }
});

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

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

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';
});

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

для получения дополнительной информации. Зацените:-

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


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

решение довольно простое, если вы думаете об этом. Идея состоит в том, чтобы дать


Я нашел лучший, но глючный способ, объединив идею 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% уверен, что он работает в основных браузерах.


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

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