Ich habe ein div, das eine große Anzahl von Elementen enthält. Ich wähle diese Elemente dynamisch aus, indem ich auf eine Schaltfläche klicke. In meinem Fall ist der Überlauf automatisch. Was ich will, ist, wenn ein Element, das nicht sichtbar ist, ausgewählt ist, um das div so zu scrollen, dass es sichtbar sein kann. Wie kann ich das machen?DIV auto scroll
können Sie verwenden, um die scrollTop Eigenschaft von Htmlelement, den Betrag zu setzen ihren Inhalt durch gescrollt wird.
Und Sie können die Menge, die Sie zum Scrollen von offsetTop des Elements, das Sie scrollen möchten, erhalten.
Zum Beispiel mit diesem HTML:
<div id="container">
<p id="item-1">foo</p>
<p id="item-2">bar</p>
<p id="item-3">baz</p>
</div>
Sie dieses JavaScript verwenden könnte den Container Div dritten Absatz blättern:
document.getElementById("container").scrollTop = document.getElementById("item-3").offsetTop;
Wenn Sie auf die Schaltfläche klicken und ein Element ausgewählt haben, rufen Sie die Methode focus() des ausgewählten Elements auf. dies wird Autoscroll zu Ihrem Elemente verursacht:
<div style="height:80px; overflow:auto;">
<input type="text" id="id1"><br><br>
<input type="text" id="id2"><br><br>
<input type="text" id="id3"><br><br>
<input type="text" id="id4"><br><br>
<input type="text" id="id5"><br><br>
<input type="text" id="id6"><br><br>
</div>
<input type="button" onclick="document.getElementById('id6').focus();">
Dies scheint nicht für die regelmäßig "div" -Elemente zu arbeiten (Zumindest nicht in Safari 4 oder Firefox 3). –
Ich versuche nicht für Safari, aber Firefox 3 funktioniert perfekt. – Canavar
Der Code, den Sie dort geschrieben haben, funktioniert perfekt. Wenn Sie jedoch die "Eingabe" -Elemente durch "div" -Elemente ersetzen, scheint die Fokussierung des div-Elements nicht darauf zu scrollen. Ein Beispiel finden Sie unter http://cloud.quintusquill.com/dropbox/ScrollTest.html. –
Sie können auch die Eigenschaft scrollTop oder scrollLeft des DIV verwenden (abhängig davon, ob die Bildlaufleiste horizontal oder vertikal ist).
Ich habe dies bereits getan und nutzte ein setTimeout-Ereignis, um es fließend zu scrollen, anstatt in 1 Bewegung. Dies ist ohne JQuery tho.
Noch eine weitere Option ... Anker.
zuordnen jedes Element eine eindeutige Kennung, und wenn Sie möchten, ein bestimmtes Element blättern, führen Sie den folgenden JavaScript-Code:
location.hash = itemID;
... wo itemID eine Variable ist, die die ID des Elements enthält Sie möchten zu scrollen.
Steve
Es ist ein Tippfehler auf js document.getElementById ("Container"). ScrollTop –
Danke Fatih. Fest. –