it-swarm.com.de

Wie kann ich das Blättern vorübergehend deaktivieren?

Ich verwende das scrollTo-Plugin jQuery und würde gerne wissen, ob es möglich ist, das Scrollen auf dem Fensterelement durch Javascript vorübergehend zu deaktivieren. Der Grund, warum ich das Scrollen deaktivieren möchte, ist, dass es beim Scrollen während scrollTo animiert wird, wirklich hässlich wird;)

Natürlich könnte ich ein $("body").css("overflow", "hidden"); machen und dann wieder auf auto setzen, wenn die Animation stoppt, aber es wäre besser, wenn die Bildlaufleiste noch sichtbar, aber inaktiv wäre.

383
Olivier Lalonde

Das scroll-Ereignis kann nicht abgebrochen werden. Sie können dies jedoch durch Abbrechen dieser Interaktionsereignisse tun:
Maus& _ ​​Touch-Scroll und Schaltflächen, die mit dem Blättern verbunden sind.

[ Arbeitsdemo ]

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

Tun Sie es einfach, indem Sie dem Körper eine Klasse hinzufügen:

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

Fügen Sie die Klasse hinzu und entfernen Sie sie, wenn Sie das Scrollen erneut aktivieren möchten, getestet in IE, FF, Safari und Chrome. 

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

Für mobile Geräte müssen Sie das Ereignis touchmove behandeln:

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

Und lösen Sie die Bindung, um das Scrollen erneut zu aktivieren. In iOS6 und Android 2.3.3 getestet

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

Hier ist eine sehr einfache Möglichkeit, dies zu tun:

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

In IE6 ist das irgendwie nervös.

50
sdleihssirhc

Die folgende Lösung ist grundlegend, aber reines JavaScript (kein jQuery):

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

function enableScrolling(){
    window.onscroll=function(){};
}
26
Mohammad Anini

Diese Lösung behält die aktuelle Bildlaufposition bei, während der Bildlauf deaktiviert ist, anders als bei einigen, bei denen der Benutzer nach oben springt.

Es basiert auf der Antwort von galambalazs , jedoch mit Unterstützung für Touch-Geräte und als einzelnes Objekt mit Jquery-Plugin-Wrapper umgestaltet.

Demo hier. 

Auf github hier.

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

Es tut mir leid, einen alten Beitrag beantworten zu müssen, aber ich habe nach einer Lösung gesucht und bin auf diese Frage gestoßen.

Es gibt viele Problemumgehungen für dieses Problem, um die Bildlaufleiste weiterhin anzuzeigen, z. B., dem Container eine Höhe von 100% und ein overflow-y: scroll-Styling zu geben.

In meinem Fall habe ich gerade ein div mit einer Bildlaufleiste erstellt, die ich beim Hinzufügen von overflow: hidden zum Hauptteil anzeigen:

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

Die Element-Bildlaufleiste muss die folgenden Stile haben:

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

Dies zeigt eine graue Bildlaufleiste, hoffentlich hilft es zukünftigen Besuchern.

14
lisovaccaro

Ich habe nach einer Lösung für dieses Problem gesucht, war aber mit der oben genannten Lösung nicht zufrieden (, als ich diese Antwort) schrieb, also kam ich zu dieser Lösung.

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

Dem galambalazs post zufolge würde ich die Unterstützung für Touch-Geräte hinzufügen, sodass wir zwar berühren können, aber nicht nach oben oder unten scrollen:

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

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

Eine andere Lösung:

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

Auf diese Weise haben Sie immer eine vertikale Bildlaufleiste, aber da der größte Teil meines Inhalts länger ist als der Ansichtsbereich, ist dies für mich in Ordnung. Der Inhalt wird mit einem separaten div zentriert, aber ohne einen neuen Rand im Hauptteil zu setzen, bleibt mein Inhalt links.

Mit diesen beiden Funktionen zeige ich mein 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);
}

Ergebnis: Nicht scrollbarer Hintergrund und keine erneute Positionierung des Inhalts aufgrund der linken Bildlaufleiste. Getestet mit aktuellem FF, Chrome und IE 10.

4
Marco

Wie wäre es damit? (Wenn Sie jQuery verwenden)

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

Je nachdem, was Sie mit dem entfernten Bildlauf erreichen möchten, können Sie einfach das Element korrigieren, aus dem Sie den Bildlauf entfernen möchten (durch Klicken oder durch Klicken auf einen anderen Auslöser, den Sie vorübergehend deaktivieren möchten)

Ich suchte nach einer "Temp no Scroll" -Lösung und für meine Bedürfnisse wurde dies gelöst

mach eine Klasse

.fixed{
    position: fixed;
}

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

Ich habe festgestellt, dass dies eine einfache Lösung ist, die auf allen Browsern gut funktioniert und auch für tragbare Geräte (z. B. iPhones, Tablets usw.) geeignet ist. Da das Element vorübergehend festgelegt ist, gibt es keine Bildlaufleiste :)

HINWEIS! Abhängig von der Platzierung Ihres "contentContainer" -Elements müssen Sie es möglicherweise von links anpassen. Dies kann leicht durch Hinzufügen eines linken CSS-Werts zu diesem Element durchgeführt werden, wenn die feste Klasse aktiv ist

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

Ich verwende showModalDialog, um die Sekundärseite als modales Dialogfeld anzuzeigen.

so blenden Sie die Bildlaufleisten im Hauptfenster aus:

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

beim Schließen des modalen Dialogs werden die Bildlaufleisten des Hauptfensters angezeigt:

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

auf Elemente im Hauptfenster aus dem Dialog zugreifen:

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

nur für alle, die nach showModalDialog :( nach Zeile 29 des Originalcodes suchen)

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

Ab Chrome 56 und anderen modernen Browsern müssen Sie dem Aufruf addEventListenerpassive:false hinzufügen, damit preventDefault funktioniert. Ich verwende das so, um das Scrollen auf dem Handy zu stoppen:

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

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

Die Absage des Ereignisses als akzeptierte Antwort ist meiner Meinung nach eine schreckliche Methode: /

Stattdessen habe ich unten position: fixed; top: -scrollTop(); verwendet.

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

Aus meinem jQuery-Popup-Projekt: 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": ""});
    }
}

Dieser Code berücksichtigt die Probleme Breite, Höhe, Bildlaufleiste und Seitensprung.

Mögliche Probleme mit dem obigen Code behoben:

  • width, bei fester Position kann die HTML-Elementbreite kleiner als 100% sein
  • höhe wie oben
  • bildlaufleiste: Wenn die Position fest eingestellt ist, verfügt der Seiteninhalt nicht mehr über eine Bildlaufleiste, selbst wenn er über eine Bildlaufleiste verfügt, bevor ein horizontaler Seitensprung ausgeführt wird
  • pagejump: Wenn die Position fixiert ist, ist der Page-ScrollTop nicht mehr wirksam, was zu einem vertikalen Seitensprung führt

Wenn jemand Verbesserungen am Code zum Einfrieren/Auftauen der obigen Seite hat, lassen Sie es mich wissen, damit ich diese Verbesserungen zu meinem Projekt hinzufügen kann.

2
seahorsepip

Ich weiß, dass dies eine alte Frage ist, aber ich musste etwas sehr ähnliches tun, und nachdem ich nach einiger Zeit nach einer Antwort gesucht und verschiedene Ansätze ausprobiert hatte, war ich am Schluss eine sehr einfache Lösung.

Mein Problem war sehr ähnlich, fast identisch, der einzige Unterschied bestand darin, dass ich die Bildlaufleiste nicht wirklich anzeigen musste. Ich musste nur sicherstellen, dass die Breite weiterhin verwendet wird. Die Seitenbreite ändert sich also nicht, während meine Überlagerung angezeigt wird .

Wenn ich mein Overlay in den Bildschirm schiebe, mache ich Folgendes:

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

und nachdem ich mein Overlay vom Bildschirm geschoben habe, mache ich:

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

WICHTIG: Dies funktioniert perfekt, da sich meine Überlagerung absolute, right: 0px bei visible befindet.

1
user2430829

Aufbauend auf Cheyenne Forbes 'Antwort, die ich hier über fcalderan gefunden habe: Deaktiviere einfach die Bildlaufleiste und verstecke sie nicht? und um Hallodoms Ausgabe des Verschwindens der Bildlaufleiste zu beheben

CSS:

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

JS:

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

Dieser Code springt Sie an den Anfang der Seite, aber ich denke, dass der Code von fcalderan eine Problemumgehung hat.

1
Quibble

Dieser Code funktioniert mit Chrome 56 und weiteren (die ursprüngliche Antwort funktioniert nicht mehr mit Chrome).

Verwenden Sie DomUtils.enableScroll(), um das Scrollen zu aktivieren.

Verwenden Sie DomUtils.disableScroll(), um das Scrollen zu deaktivieren.

class DomUtils {
  // left: 37, up: 38, right: 39, down: 40,
  // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
  static keys = { 37: 1, 38: 1, 39: 1, 40: 1 };

  static preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;
  }

  static preventDefaultForScrollKeys(e) {
    if (DomUtils.keys[e.keyCode]) {
      DomUtils.preventDefault(e);
      return false;
    }
  }

  static disableScroll() {
    document.addEventListener('wheel', DomUtils.preventDefault, {
      passive: false,
    }); // Disable scrolling in Chrome
    document.addEventListener('keydown', DomUtils.preventDefaultForScrollKeys, {
      passive: false,
    });
  }

  static enableScroll() {
    document.removeEventListener('wheel', DomUtils.preventDefault, {
      passive: false,
    }); // Enable scrolling in Chrome
    document.removeEventListener(
      'keydown',
      DomUtils.preventDefaultForScrollKeys,
      {
        passive: false,
      }
    ); // Enable scrolling in Chrome
  }
}
1
PerrierCitror

Ich habe das gleiche Problem, unten ist die Art, wie ich damit umgehe.

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

ich hoffe das hilft.

1
sou yang

Die einfachste Methode ist:

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

Um es rückgängig zu machen:

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

Einfach zu implementieren, aber der einzige Nachteil ist:

  • Die Seite springt ein wenig nach links, wenn sie zentriert (horizontal) ist.

Dies liegt daran, dass die Bildlaufleiste entfernt wurde und das Ansichtsfenster etwas breiter wurde.

1
Daan

Hier ist meine Lösung zum Stoppen des Scrollens (keine jQuery). Ich verwende es, um den Bildlauf zu deaktivieren, wenn das Seitenmenü angezeigt wird.

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

Ich habe 17px-Auffüll-rechts gesetzt, um das Verschwinden der Bildlaufleiste auszugleichen. Dies ist jedoch auch problematisch, vor allem für mobile Browser. Gelöst durch Ermitteln der Balkenbreite gemäß this .

Alle zusammen in diesem Stift.

1
Josep81

Ich hatte ein ähnliches Animationsproblem auf mobilen Bildschirmen, aber nicht auf Laptops, als ich versuchte, ein div mit dem animierten Befehl von jquery zu animieren. Also entschied ich mich für einen Timer, der die Bildlaufposition des Fensters so häufig wiederherstellte, dass das Dokument mit bloßem Auge statisch wirkt. Diese Lösung funktionierte perfekt auf einem kleinen Bildschirmgerät wie Samsung Galaxy-2 oder iPhone-5. 

Hauptlogik dieses Ansatzes : Der Zeitgeber zum Setzen der Bildlaufposition des Fensters auf die ursprüngliche Bildlaufposition sollte vor dem Jquery-Animationsbefehl gestartet werden. Wenn die Animation abgeschlossen ist, müssen wir diesen Zeitgeber löschen (original scroll position ist die Position unmittelbar vor der Animation) beginnt).

Ich fand zu meiner angenehmen Überraschung, dass das Dokument während der Animationsdauer tatsächlich statisch wirkte, wenn das Zeitgeberintervall 1 millisecond war, was ich anstrebte. 

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

EINE ANDERE LÖSUNG, die funktionierte : Basierend auf der Antwort von Mohammad Anini in diesem Beitrag zum Aktivieren/Deaktivieren des Scrollens habe ich auch festgestellt, dass eine modifizierte Version des Codes wie unten funktioniert.

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

Etwas, was ich gerade zusammengestellt habe:

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>

0
akinuri

Eine einfache Lösung, die für mich funktioniert hat (das Fenster-Scrollen vorübergehend deaktivieren).

Basierend auf dieser Geige: http://jsfiddle.net/dh834zgw/1/

das folgende Snippet (mit Jquery) deaktiviert den Bildlauf des Fensters:

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

Und in deinem CSS:

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

Wenn Sie nun den Modal entfernen, vergessen Sie nicht, die Noscroll-Klasse aus dem HTML-Tag zu entfernen:

$('html').toggleClass('noscroll');
0
ling
var winX = null, winY = null;
window.addEventListener('scroll', function () {
    if (winX !== null && winY !== null) {
        window.scrollTo(winX, winY);
    }
});
function disableWindowScroll() {
    winX = window.scrollX;
    winY = window.scrollY;
};
function enableWindowScroll() {
    winX = null;
    winY = null;
};
0
Văn Quyết

Meine Einstellung zu dieser Ausgabe beinhaltet auch ein Problem mit der Körperbreite, da die Seite ein wenig zu tanzen scheint, wenn wir die Bildlaufleiste mit overflow = "hidden"..__ ausblenden.

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

Dies ist die einfachste Lösung, die ich bisher bekommen habe. Und glauben Sie mir, ich habe alle anderen ausprobiert und dies ist das Einfachste. Es funktioniert hervorragend auf Windows-Geräten, wodurch die Seite von rechts verschoben wird, um Platz für die Bildlaufleiste des Systems zu haben, und IOS Geräte, für die kein Platz erforderlich ist Bildlaufleisten in den Browsern. Wenn Sie dies verwenden, müssen Sie also keine Auffüllung auf der rechten Seite hinzufügen, damit die Seite nicht flackert, wenn Sie den Überlauf des Körpers oder der HTML-Datei mit css ausblenden.

Die Lösung ist ziemlich einfach, wenn Sie darüber nachdenken. Die Idee ist, dem window.scrollTop () die gleiche Position zu geben, wenn ein Popup geöffnet wird. Ändern Sie auch diese Position, wenn die Fenstergröße geändert wird (sobald sich die Bildlaufposition ändert).

Auf geht's...

Zuerst erstellen wir die Variable, die Sie darüber informiert, dass das Popup geöffnet ist, und nennen Sie es stopWindowScroll. Wenn wir dies nicht tun, wird eine undefinierte Variable auf Ihrer Seite angezeigt und auf 0 gesetzt - als nicht aktiv.

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

Jetzt können Sie die Open-Popup-Funktion erstellen, die eine beliebige Funktion in Ihrem Code sein kann, die jedes Popup auslöst, das Sie als Plug-In oder als benutzerdefiniertes Element verwenden. In diesem Fall handelt es sich um ein einfaches benutzerdefiniertes Popup mit einer einfachen Dokument-Klick-Funktion.

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

Als nächstes erstellen wir die close popup-Funktion, die ich wiederhole, kann eine beliebige Funktion sein, die Sie bereits erstellt haben oder in einem Plugin verwenden. Wichtig ist, dass wir diese beiden Funktionen benötigen, um die Variable stopWindowScroll auf 1 oder 0 zu setzen, um zu wissen, wann sie geöffnet oder geschlossen ist.

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

Dann können wir die window.scroll-Funktion erstellen, um das Scrollen zu verhindern, sobald stopWindowScroll auf 1 gesetzt ist - als aktiv.

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

Das ist es. Dazu ist kein CSS erforderlich, außer Ihren eigenen Stilen für die Seite. Das hat für mich wie ein Zauber funktioniert und ich hoffe, es hilft dir und anderen.

Hier ist ein Arbeitsbeispiel zu JSFiddle: 

JS Fiddle Beispiel

Sag mir, ob das geholfen hat. Grüße.

0
Architect

Ich habe diese Antwort auf einer anderen Seite gefunden :

Scroll deaktivieren:

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

Nach dem Schließen des Popup-Releases blättern:

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

Speichern Sie die Bildlauflänge in einer globalen Variablen und stellen Sie sie bei Bedarf wieder her!

var sctollTop_length = 0;

function scroll_pause(){
  sctollTop_length = $(window).scrollTop();
  $("body").css("overflow", "hidden");
}

function scroll_resume(){
  $("body").css("overflow", "auto");
  $(window).scrollTop(sctollTop_length);
}
0
Kareem

die Lösung von Galambalazs ist großartig! In Chrome und Firefox hat es perfekt funktioniert. Es kann auch erweitert werden, um ein Standardereignis aus dem Browserfenster zu verhindern. Nehmen wir an, Sie machen eine App auf der Leinwand. Sie könnten das tun:

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

Und dann sagen wir auf Ihrer App, dass Sie Ihre eigenen Ereignisse wie Maus, Tastatur, Berührungsereignisse usw. verarbeiten werden. Sie können die Standardereignisse deaktivieren, wenn sich die Maus innerhalb der Zeichenfläche befindet, und sie wieder aktivieren, wenn Sie die Maus verwenden geht raus:

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

Sie könnten sogar das Rechtsklick-Menü mit diesem Hack deaktivieren:

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

Ich habe ein ähnliches Problem mit Touch-Geräten. Durch Hinzufügen von "touch-action: none" zu dem Element wurde das Problem behoben.

Für mehr Informationen. Überprüfen Sie dies heraus: -

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

0
Gurpreet

Sie können die Leertaste blockieren und die Browser-Bildlaufleiste ausblenden:

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

    }
});

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

Nein, ich würde mich nicht für die Ereignisbehandlung entscheiden, weil:

  • nicht alle Ereignisse erreichen garantiert den Körper,

  • wenn Sie Text auswählen und nach unten bewegen, wird das Dokument tatsächlich durchlaufen.

  • wenn in der Phase, in der die Trennung von etw schief geht, sind Sie zum Scheitern verurteilt.

Ich habe davon gebissen, indem ich eine Copy-Paste-Aktion mit einem ausgeblendeten Textbereich gemacht habe, und raten Sie mal, was die Seite beim Blättern immer beim Scrollen ist, weil ich intern den Textbereich auswählen muss, bevor ich document.execCommand('copy') anrufe.

Wie auch immer, so gehe ich, beachte die setTimeout():

document.body.setAttribute('style','overflow:hidden;');
// do your thing...
setTimeout(function(){document.body.setAttribute('style','overflow:visible;');}, 500);

Ein Momentumblinken ist vorhanden, da die Bildlaufleisten momentan verschwinden, aber es ist akzeptabel.

0
centurian