1
J'utilise Element.scrollIntoView(). Le défilement fonctionne, mais il casse la mise en page de toute ma page en même temps. Voici la démo:comportement du comportement de Element.scrollIntoView()
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: lightgray;
}
ul {
position: absolute;
width: 100%;
height: 300px;
left: 0;
bottom: 0;
background-color: gray;
overflow-y: scroll;
}
li {
list-style: none;
}
#div {
position: absolute;
width: 100%;
height: 300px;
left: 0;
bottom: -300px;
background-color: darkgray;
}
button {
position: absolute;
right: 0;
bottom: 0;
}<div class=content>
<!-- it's the ul to scroll, staying at the bottom of the page -->
<ul>
<li id=li>abc</li>
<li>def</li>
</ul>
<!-- it's the div hidden under the bottom edge of the page -->
<div id=div>i should stay hidden.</div>
<button onclick=li.scrollIntoView();>scrollIntoView</button>
</div>Je me cache un <div> sous le bord inférieur de la page. Lorsque je scrollIntoView le 1er <li> dans <ul>, le caché <div> est retiré. Non seulement le <div>, tout le contenu de la page est tiré pour 300px.
Je m'attends à faire simplement défiler le <li> en vue de <ul>. Pourquoi affecte-t-il la mise en page de la page entière?