Jak tymczasowo wyłączyć przewijanie?

Zrób to po prostu dodając klasę do Ciała:

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

Dodaj klasę, A następnie usuń, gdy chcesz ponownie włączyć przewijanie, testowane w IE, FF, Safari i Chrome.

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

Dla urządzeń mobilnych, musisz obsłużyć Zdarzenie touchmove:

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

I odłączyć, aby ponownie włączyć przewijanie. Testowane w iOS6 i Android 2.3.3

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

Oto naprawdę podstawowy sposób, aby to zrobić:

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

To rozwiązanie utrzyma aktualną pozycję przewijania, podczas gdy przewijanie jest wyłączone, w przeciwieństwie do niektórych, które przeskakują użytkownika z powrotem na górę.

Jest oparty na galambalazs ' answer , ale z obsługą urządzeń dotykowych, i refactored jako pojedynczy obiekt z jQuery plugin wrapper.

Demo tutaj.

Na GitHubie.

/**
 * $.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);

Poniższe rozwiązanie to podstawowy, ale czysty JavaScript (bez jQuery):

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

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

Przepraszam, że odpowiadam na stary post, ale szukałem rozwiązania i natknąłem się na to pytanie.

Istnieje wiele obejść tego problemu, aby nadal wyświetlać pasek przewijania, na przykład nadanie kontenerowi 100% wysokości i stylizacji overflow-y: scroll.

W moim przypadku właśnie stworzyłem div z paskiem przewijania, który wyświetlam podczas dodawania overflow: hidden do ciała:

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

Element scrollbar musi mieć takie style:

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

To pokazuje szary pasek przewijania, mam nadzieję, że pomoże to w przyszłości goście.

Zgodnie z postem galambalazs dodałbym wsparcie dla urządzeń dotykowych, pozwalając nam dotykać, ale bez przewijania w górę lub w dół:

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

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

Szukałem rozwiązania tego problemu, ale nie byłem zadowolony z żadnego z powyższych rozwiązań ( w momencie pisania tej odpowiedzi ), więc wymyśliłem to rozwiązanie..

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

Inne rozwiązanie:

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

W ten sposób zawsze masz pionowy pasek przewijania, ale ponieważ większość moich treści jest dłuższa niż widok, jest to dla mnie ok. Zawartość jest wyśrodkowana oddzielnym div, ale bez ustawiania marginesu ponownie w ciele Moja zawartość pozostanie po lewej stronie.

Są to dwie funkcje, których używam do wyświetlania mojego popup / modal:

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

Wynik: nie przewijalne tło i brak ponownego pozycjonowania zawartości z powodu lewego paska przewijania. Testowane z aktualnym FF, Chrome i IE 10.

Co ty na to? (Jeśli używasz 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() });
    }
};

W zależności od tego, co chcesz osiągnąć z usuniętym przewijaniem, możesz po prostu naprawić element, z którego chcesz usunąć przewijanie (po kliknięciu lub innym wyzwalaczu, który chcesz tymczasowo wyłączyć przewijanie)

Szukałem rozwiązania "temp no scroll" i dla moich potrzeb, to go rozwiązało

Stwórz klasę

.fixed{
    position: fixed;
}

Następnie z 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');
    };
});

Stwierdziłem, że jest to dość proste rozwiązanie, które działa dobrze na wszystkich przeglądarkach, a także sprawia, że dla prosta obsługa na urządzeniach przenośnych (np. iPhone, tablety itp.). Ponieważ element jest tymczasowo naprawiony, nie ma zwoju:)

Uwaga! W zależności od umiejscowienia elementu "contentContainer" może być konieczne dostosowanie go od lewej strony. Co można łatwo zrobić, dodając do tego elementu lewą wartość css, gdy stała klasa jest aktywna

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

Używam showModalDialog, do wyświetlania strony drugorzędnej jako okna modalnego.

Aby ukryć paski przewijania głównego okna:

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

I podczas zamykania okna modalnego, wyświetlanie pasków przewijania w oknie głównym:

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

Dostęp do elementów w oknie głównym z okna dialogowego:

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

Tylko dla każdego, kto szuka o showModalDialog:(po linii 29 kodu oryginalnego)

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

Anulowanie zdarzenia jak w zaakceptowanej odpowiedzi jest moim zdaniem okropną metodą: /

Zamiast tego użyłem position: fixed; top: -scrollTop(); poniżej.

Demo: https://jsfiddle.net/w9w9hthy/5/

Z mojego projektu jQuery popup: 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": ""});
    }
}

Ten kod bierze pod uwagę, szerokość, wysokość, scrollbar i pagejump.

Możliwe problemy rozwiązane za pomocą powyższego kodu:

• szerokość, przy ustawianiu pozycji stała html Szerokość elementu może być mniejsza niż 100%
• wysokość, taka sama jak wyżej
• scrollbar, gdy ustawiono pozycję, zawartość strony nie ma już paska przewijania, nawet jeśli miał pasek przewijania przed powstaniem poziomego zrzutu strony
• pagejump, gdy ustawiono stałą pozycję, scrollTop strony nie jest już skuteczny, co skutkuje pionowym zrzutem strony

Jeśli ktoś ma jakieś ulepszenia do powyższego kodu zamrażania / odmrażania strony daj mi znać, abym mógł dodać te ulepszenia do mojego projekt.

Począwszy od Chrome 56 i innych nowoczesnych przeglądarek, musisz dodać {[1] } do wywołania addEventListener, Aby preventDefault zadziałało. Więc używam tego, aby przestać przewijać na telefonie komórkowym:

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

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

Bazując na odpowiedzi Cheyenne' a Forbesa, którą znalazłem tutaj przez fcalderan: Po prostu wyłącz przewijanie, a nie Ukryj Go? i naprawić problem Hallodoma znikającego paska przewijania

CSS:

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

JS:

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

Ten kod przeskakuje na górę strony, ale myślę, że kod fcalderan ma obejście.

Wiem, że to stare pytanie, ale musiałem zrobić coś bardzo podobnego i po jakimś czasie szukając odpowiedzi i próbując różnych podejść, skończyło się na bardzo łatwym rozwiązaniu.

Mój problem był bardzo podobny, prawie identyczny, jedyną różnicą jest to, że nie musiałem pokazywać paska przewijania - musiałem tylko upewnić się, że jego szerokość będzie nadal używana, aby szerokość strony nie zmieniała się podczas wyświetlania mojej nakładki.

Kiedy zacznę przesuwać nakładkę w screen, I do:

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

A po zsunięciu nakładki z ekranu robię:

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

Ważne: to działa idealnie, ponieważ moja nakładka jest umieszczona absolute, right: 0px Kiedy visible.

Mam ten sam problem, poniżej jest sposób, w jaki sobie z nim radzę.

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

Najprostsza metoda to:

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

Aby to cofnąć:

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

Łatwy do wdrożenia, ale jedynym minusem jest:

• strona przeskoczy nieco w lewo, jeśli jest wyrównana do środka (poziomo).

Jest to spowodowane usunięciem paska przewijania, a widok staje się nieco szerszy.

Oto moje rozwiązanie, aby zatrzymać przewijanie (bez jQuery). Używam go, aby wyłączyć przewijanie, gdy pojawi się menu boczne.

<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>

Wstawiłem 17px padding-right, aby zrekompensować zniknięcie paska przewijania. Ale jest to również problematyczne, głównie dla przeglądarek mobilnych. Rozwiązano przez uzyskanie szerokości paska zgodnie z to .

Wszystko razem w tym długopisie.

Znalazłem tę odpowiedź na innej Stronie :

Wyłącz przewijanie:

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

Po zamknięciu wyskakującego okienka przewiń:

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

Rozwiązanie Galambalazsa jest świetne! To działało idealnie dla mnie zarówno w Chrome i Firefox. Może być również rozszerzony, aby zapobiec domyślnemu zdarzeniu z okna przeglądarki. Załóżmy, że robisz aplikację na płótnie. Możesz to zrobić:

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

A następnie w aplikacji powiedzmy, że będziesz przetwarzać własne zdarzenia, takie jak mysz, klawiatura, zdarzenia dotykowe i tak dalej... Możesz wyłączyć domyślne zdarzenia, gdy mysz wejdzie do obszaru roboczego i włączyć je ponownie, gdy mysz pójdzie out:

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

Możesz nawet wyłączyć menu prawym przyciskiem myszy za pomocą tego hacka:

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

Miałem podobny problem z animacją na ekranach mobilnych, ale nie na laptopach, gdy próbowałem animować div za pomocą polecenia jQuery animate. Postanowiłem więc użyć timera, który przywracał pozycję przewijania okna tak często, że gołym okiem dokument wydawał się statyczny. To rozwiązanie działało doskonale na małym ekranie urządzenia mobilnego, takiego jak Samsung Galaxy-2 lub iphone-5.

Główna logika tego podejścia: timer ustawiający pozycję przewijania okna na oryginalną przewijanie pozycja powinna być uruchomiona przed poleceniem jQuery animate, a następnie po zakończeniu animacji musimy wyczyścić ten timer (original scroll position to pozycja tuż przed rozpoczęciem animacji).

ku mojemu miłemu zaskoczeniu odkryłem, że dokument rzeczywiście wydawał się statyczny podczas trwania animacji, jeśli interwał czasowy był 1 millisecond, do czego zmierzałem.

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

Inne rozwiązanie, które zadziałało : na podstawie odpowiedzi Mohammada Aniniego pod tym postem do włącz/wyłącz przewijanie, odkryłem również, że zmodyfikowana wersja kodu jak poniżej działała.

//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() {};
});

Proste rozwiązanie, które zadziałało dla mnie (chwilowe wyłączenie przewijania okna).

Na podstawie tego wiersza: http://jsfiddle.net/dh834zgw/1/

Poniższy fragment (używając jquery) wyłączy przewijanie okna:

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

I w css:

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

Teraz, gdy usuniesz modal, nie zapomnij usunąć klasy noscroll na znaczniku html:

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

Coś, co właśnie ułożyłem:

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>

Możesz zablokować przewijanie spacji i ukryć pasek przewijania przeglądarki:

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

    }
});

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

Moje podejście do tej kwestii obejmuje również problem z szerokością ciała, ponieważ strona wydaje się trochę tańczyć, gdy ukrywamy pasek przewijania za pomocą overflow = "hidden". Poniższy kod działa dla mnie doskonale i opiera się na podejściu kątowym.

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

Mam podobny problem na urządzeniach dotykowych. Dodanie "touch-action: none" do elementu rozwiązało problem.

Aby uzyskać więcej informacji. Zobacz to: -

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

To najprostsze rozwiązanie, jakie do tej pory zdobyłem. I uwierz mi, próbowałem wszystkich innych i to jest najłatwiejsze. Działa świetnie na urządzeniach z systemem Windows , które przesuwają stronę z prawej strony, aby mieć miejsce na systemowy pasek przewijania i Urządzenia z systemem IOS, które nie wymagają miejsca na swoje paski przewijania w przeglądarkach. Tak więc, używając tego, nie musisz dodawać wypełnienia po prawej stronie, aby strona nie migotała, gdy ukryj przepełnienie ciała lub html za pomocą css .

The rozwiązanie jest dość proste, jeśli się nad tym zastanowić. Chodzi o to, aby dać okno.scrollTop () ta sama dokładna pozycja w momencie otwarcia wyskakującego okienka. Zmień również tę pozycję, gdy okno zmieni rozmiar (gdy zmieni się pozycja przewijania).

Najpierw Utwórz zmienną, która poinformuje cię, że wyskakujące okienko jest otwarte i nazwij ją stopWindowScroll . Jeśli tego nie zrobimy, otrzymasz błąd niezdefiniowanej zmiennej na Twoja strona i ustaw ją na 0 - jako nieaktywną.

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

Teraz pozwala, aby funkcja open popup witch mogła być dowolną funkcją w kodzie, która uruchamia dowolne wyskakujące okienko, którego używasz jako wtyczki lub niestandardowe. W tym przypadku będzie to proste niestandardowe wyskakujące okienko z prostą funkcją dokumentu kliknięcia.

$(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);
});

Więc następną rzeczą, którą robimy, jest utworzenie funkcji close popup, która powtarzam ponownie może być dowolną funkcją, którą już stworzyłeś lub używasz w wtyczce. Najważniejsze jest to, że my potrzebujesz tych 2 funkcji, aby ustawić zmienną stopWindowScroll na 1 lub 0, aby wiedzieć, kiedy jest otwarta lub zamknięta.

$(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);
});

Następnie stwórzmy okno.funkcja scroll, dzięki której możemy zapobiec przewijaniu po ustawieniu stopWindowScroll powyżej na 1 - jako aktywny.

$(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);
    }
});

Oto przykład pracy na JSFiddle:

Przykład js Fiddle

Znalazłem lepszy, ale błędny sposób, łącząc ideę 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;
};

Nie testowałem tego, ale później edytuję i dam wam znać. Jestem w 85% pewien, że działa na głównych przeglądarkach.

Włączenie następującego CSS za pomocą JavaScript pomoże. Nie jestem tak dobry jak inni, ale to mi pomogło.

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