Empêcher la modification de position sur l'entrée de formulaire collant

Question

J'ai une page Web simple qui a un en-tête, un contenu dynamique et un pied de page collant. Dans le pied de page, j'ai un formulaire qui a une entrée de texte et un bouton de soumission.

Dans les situations où le contenu s'étend au-delà de la zone visuelle de la page, la forme collante se comporte comme prévu (elle est visible au bas de la zone visible). J'ai remarqué que lorsque je saisis des modifications de texte dans le champ de texte du formulaire, le contenu dynamique défile automatiquement vers le bas. Je l'ai mis en place un hack pour faire défiler le contenu de retour à sa position d'origine, mais je me demandais s'il y avait un moyen de désactiver le comportement de défilement pour commencer avec ...

https://jsfiddle.net/vy8h77xr/18/

html:

<div class="list" id="list"> 
    <ul> 
    <li>content</li> 
    <!-- add more content to fill beyond the page --> 
    </ul> 
</div> 
<div class="footer"> 
    <form id="form"> 
    <input type="text" id="text"/> 
    <input type="submit" value="Submit" id="submit" /> 
    </form> 
</div> 

css:

.footer { 
    position: sticky; 
    bottom: 0; 
} 

js:

var text = document.getElementById("text"); 
text.addEventListener("keydown", (e) => { 
    var y = window.scrollY; 
    setTimeout(() => window.scrollTo(0, y), 0); 
}) 

Answer 1

Vous utilisez un pied collant mais avec 0px par le bas, donc vous n'avez pas vraiment besoin de ce genre de position. Essayez de simplement faire votre pied de page fixe comme ceci.

.footer { 
    position: fixed; 
    bottom: 0; 
} 

https://jsfiddle.net/Andrej_v/vy8h77xr/20/

Vous pouvez trouver plus sur cette position ici:

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