Hidden Overflow Interrupts Animation

Question

Ich habe ein bisschen eine komplexe Frage hier, aber ich werde mein Bestes versuchen. Also ich habe eine Animation erstellt, auf meiner Seite gibt es eine <div> mit overflow: hidden, die Animation stoppt an dieser Stelle für ein paar Sekunden und fährt dann fort, irgendeine Idee, wie ich das beheben könnte?

$(document).ready(function(){ 
 
    $(".scrollTo").on('click', function(e){ 
 
    e.preventDefault(); 
 
    var target = $(this).attr('href'); 
 
    $('html, body').animate({ 
 
     scrollTop: ($(target).offset().top) 
 
    }, 2000); 
 
    }); 
 
});

#two { 
 
    height: 110vh; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="test"> 
 
    <li><a href="#three" class="scrollTo" data-content="">tutorials</a></li> 
 
</ul>

Answer 1

Die overflow: Eigenschaft auf hidden hat einen Fehler in der Animation an der genannten Stelle verursacht.

Eine kleine Definition des overflow Eigenschaft

Der Überlauf-Eigenschaft gibt an, was passiert, wenn der Inhalt eines Elements Box überläuft. Diese Eigenschaft gibt an, ob Inhalte abgeschnitten oder Bildlaufleisten hinzugefügt werden sollen, wenn der Inhalt eines Elements zu groß ist, um in einen bestimmten Bereich zu passen.

Versuchen Sie, die overflow Eigenschaft auto Einstellung scroll oder visible und überprüfen, um zu sehen, ob dies die Panne beheben