Wie kann man den Bildlauf vorübergehend deaktivieren?

Question

Ich benutze das scrollTo jQuery-Plugin und würde gerne wissen, ob es irgendwie möglich ist, das Scrollen auf dem Fenster-Element durch Javascript vorübergehend zu deaktivieren? Der Grund, warum ich das Scrollen deaktivieren möchte, ist, dass, wenn Sie scrollen, während scrollTo animiert wird, wird es wirklich hässlich ;)

Natürlich könnte ich eine $("body").css("overflow", "hidden"); und dann wieder auf Auto stellen, wenn die Animation aufhört, aber es wäre besser, wenn die Bildlaufleiste weiterhin sichtbar, aber inaktiv wäre.

Answer 1

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

• nicht alle Ereignisse werden garantiert den Körper erreichen,

• Wenn Sie Text markieren und nach unten bewegen, wird das Dokument tatsächlich durchgeblättert,

• Wenn in der Phase der Ereignisablösung etwas schief geht, sind Sie verloren.

Ich habe durch diese gebissen, indem Sie eine Kopieren-Einfügen-Aktion mit einem versteckten Textarea und erraten, was, die Seite scrollen, wann immer ich kopieren, weil intern ich die Textarea auswählen müssen, bevor ich aufrufen document.execCommand('copy') .

Jedenfalls gehe ich so vor, beachten Sie die setTimeout() :

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

Es gibt ein kurzes Aufblitzen, wenn die Bildlaufleisten kurzzeitig verschwinden, aber das ist akzeptabel, finde ich.

Answer 2

Selon le galambalazs post würde ich Unterstützung für Touch-Geräte hinzufügen, so dass wir 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; 
   }
}

Answer 3

Je nachdem, was Sie mit dem entfernten Bildlauf erreichen wollen, könnten Sie einfach das Element fixieren, von dem Sie den Bildlauf entfernen wollen (bei Klick oder einem anderen Auslöser, der den Bildlauf vorübergehend deaktivieren soll)

Ich habe nach einer "temp no scroll"-Lösung gesucht, und für meine Bedürfnisse war dies die Lösung

eine Klasse bilden

.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 fand, dass dies eine einfache Lösung ist, die in allen Browsern gut funktioniert und auch auf mobilen Geräten (z. B. iPhones, Tablets usw.) einfach zu verwenden ist. Da das Element vorübergehend fixiert ist, gibt es kein Scrollen :)

HINWEIS: Je nach Platzierung Ihres "contentContainer"-Elements müssen Sie es möglicherweise von links anpassen. Dies lässt sich leicht bewerkstelligen, indem Sie dem Element einen css-Wert für "left" hinzufügen, 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)
});

Answer 4

Das können Sie so machen:

Auf diese Weise sparen Sie "unbedeutenden" Speicher und die Elemente, die mit Position: fixed sich nicht bewegt haben und somit auch nicht Ihr Design selbst behindern.

CSS (Die Verwendung von CSS macht Ihr Leben und Ihr Gedächtnis leichter)

html[DisableScroll] {
    overflow-y: scroll;
}

html[DisableScroll] body {
    overflow-y: hidden;
    height: 100vh;
}

JS

var enableScroll = function () {
   document.documentElement
     .removeAttribute('DisableScroll');
}

z.B.

//When you want to enable escroll just call this function;

var enableScroll = function () {
   document.documentElement
   .removeAttribute('DisableScroll');
}

 setTimeout(() => {
    enableScroll();
}, 2000);

*{
  margin: 0px;
  padding: 0px
}
body{
  height: 4000px;
  background: #141417
}

html[DisableScroll] {
    overflow-y: scroll
}

html[DisableScroll] body {
    overflow-y: hidden;
    height: 100vh;
}
body>p{
color: #FBFBFD
}

div{
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  width: 270px;
  background: #FBFBFD;
  color: #141417;
  text-align: center
} 

<!DOCTYPE html>
 <html lang="en" DisableScroll>
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body> 
    <div>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    </div>
     <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
    <p>@@@@</p><br>
 </body>
 </html>

Answer 5

Ich habe festgestellt, dass es nicht notwendig war, den Stil der Karosserie zu ändern.

Das Einzige, was wir brauchen, ist zu verhindern, dass das gesamte Dokument (html-Element) ein y-Scrolling hat.

Wir können eine Stilvorlage mit Javascript erstellen und zerstören, um dies zu tun. Hier ist, wie ich es tun:

https://jsfiddle.net/3os72ryk/

var scroll_style_element;

function disable_scrolling(){

  // Create a style sheet we will only use to disable scrolling :
  scroll_style_element = document.createElement('style');
  document.head.appendChild(scroll_style_element);
  const scroll_style_sheet = scroll_style_element.sheet;

  scroll_style_sheet.insertRule('html{height:100%;overflow-y:hidden;}', scroll_style_sheet.cssRules.length);
}

function enable_scrolling(){
  if( scroll_style_element ) document.head.removeChild(scroll_style_element);
}

Ich bin sehr daran interessiert zu erfahren, ob jemand etwas an diesem Ansatz auszusetzen hat, und bitte um einen Kommentar.