Automatisches Scrollen bei Seitenwechsel stoppen

Question

Ich habe eine Seite, die bei einem Scroll-Event einen Inhalt hinzufügt und entfernt.

Jetzt bei der Verwendung von Chrome (IE11 scheint nicht zu diesem Verhalten), wann immer der Inhalt hinzugefügt und auf der Seite entfernt wird ein Scroll-Ereignis generiert (ich denke, um die Client-Ansicht bei Seitenänderungen konsistent zu halten) .

Ich will das nicht. Das bei der Inhaltsänderung erzeugte Bildlaufereignis löst weitere Inhaltsänderungen aus, die wiederum mehr Bildlaufereignisse auslösen.

Irgendwelche Ratschläge, wie ich dieses Verhalten für alle Browser stoppen kann? Ich möchte kein automatisches Scrollen. Ich möchte nur Benutzer Scrolling registriert werden.

Hier ist ein einfacher Beispielcode. Ein Klick auf den „Klick“ -Taste wird die farbigen diffs Kabinettsumbildung und die Seite blättern selbst machen (in Chrome, nicht IE11) ...

function removeStuff(){ 
 
    var elem = document.getElementById("center"); 
 
    document.getElementById("container").removeChild(elem); 
 
    document.getElementById("container").appendChild(elem); 
 
}

#top { 
 
    background-color: green; 
 
    height:1500px; 
 

 
} 
 

 
#center { 
 
    background-color: blue; 
 
    height:1000px; 
 
} 
 

 
#bottom { 
 
    background-color: red; 
 
    height:1500px; 
 
}

<div id="container"> 
 
    <div id="top"></div> 
 
    <div id="center"></div> 
 
    <button id="button" onclick="removeStuff()">click</button> 
 
    <div id="bottom"></div> 
 
</div> 
 

 

Answer 1

Das glaube ich nicht, dass Sie diese deaktivieren können Verhalten, aber Sie können es umgehen. Da Chrome das Ereignis scroll synchron ausführt, wenn Sie removeChild aufrufen, können Sie diese Arten von Bildlaufereignissen erkennen, indem Sie einen globalen Booleschen Wert auf true kurz vor dem removeChild setzen und direkt danach wieder auf false setzen.

var isRemovingStuff = false; 
function removeStuff(){ 
    var elem = document.getElementById("center"); 

    // Chrome does a scroll here, set isRemovingStuff to true 
    // so our scroll handler can know to ignore it. 
    isRemovingStuff = true; 
    document.getElementById("container").removeChild(elem); 
    isRemovingStuff = false; 

    document.getElementById("container").appendChild(elem); 

    // TODO: set the scrollTop back to what you want it to be. 
} 

Und Ihr Scroll-Handler würde wie folgt aussehen:

function onScroll() { 
    if (isRemovingStuff) 
     return; 

    // Do cool stuff 
} 

Answer 2

Dies ist eine Chrom-Funktion vor kurzem hinzugefügt ist, Scroll-Verankerung genannt.

Deaktivieren Sie im Browser: gehen Sie zu chrome://flags/#enable-scroll-anchoring und setzen Sie "Scroll-Verankerung" auf "Deaktiviert".

Disable via CSS:

.some-element { 
    overflow-anchor: none; 
}