Wie, um einen Bildlauf zum li-element in einer ul-Liste

Ich habe eine ul-Liste innerhalb eines div-Element mit li-Elementen und innerhalb der li-Elemente ist eine einzige checkbox. Ich habe die id für die Checkboxen. Ich will also die übergeordnete li-element der checkbox und navigieren Sie zu der position. Und ich kann nicht damit es funktioniert.

Mein html sieht so aus:

<div id="divElement">
   <ul>
      <li>
         <input type="checkbox" id="343532532523" />
      </li>
   </ul>
</div>

Habe ich versucht diese beiden Methoden, und Sie arbeiten nicht für mich:

$('#divElement').scrollTop($('#343532532523').parent().position().top);
$('#divElement').firstChild().scrollTop($('#343532532523).parent().position().top);

Können Sie nach dem Beispiel in jsfiddle.net?
Möchten Sie zu gehen, um LI-element oder Holen Sie sich die position des LI-element ?
gehen Sie auf das Li-element

InformationsquelleAutor kyleb | 2012-10-12

8

Wenn jemand braucht eine Vanille-JS-version, die folgende ist gut für mich, der Wert von 50 ist nur so, dass ich mich zeigt die ganze Sache, wenn ich in der Nähe der Spitze der Liste. Sie können einstellen, dass.
```
function updateListSelection(liID) {

    var list = document.getElementById("id Tag Of The <UL> element"),
        targetLi = document.getElementById(liID); //id tag of the <li> element

    list.scrollTop = (targetLi.offsetTop - 50);
};
```
- Danke, Funktioniert mit IE8 auch.
InformationsquelleAutor Darren
3

Hatte ich einen anderen dev Freund von mir, der mir half und wir kamen auf dies und es funktioniert, kein animieren, ich könnte es tun, nur ich brauche es nicht..
```
var offset = $('#someDivElementId ul li').first().position().top;
$('#someDivElementId').scrollTop($('#23532532532532').parent().position().top - offset);
```
InformationsquelleAutor kyleb
1

Ich fixierte diese mit dem Element.scrollIntoView() Ansatz:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Arbeitete er in Chrome, Firefox und Internet Explorer - habe ich noch nicht getestet es in jedem anderen Browser.

InformationsquelleAutor David Christopher Reynolds

Alte Frage, aber hier ist eine Reine js-Funktion, die Schriftrollen der LI in die Ansicht an der Spitze, wenn es gerade über der Oberseite und an der Unterseite, wenn es momentan unter dem Boden. Das gibt glatte scrollen von der UL, wenn Sie mit den up /down-Pfeile, um einen Bildlauf durch Sie (mit addEventListener keydown-und keyup-Ereignisse).

function scrollUL(li) {
    //scroll UL to make li visible
    //li can be the li element or its id
    if (typeof li !== "object"){
        li = document.getElementById(li);
    }
    var ul = li.parentNode;
    //fudge adjustment for borders effect on offsetHeight
    var fudge = 4;
    //bottom most position needed for viewing
    var bottom = (ul.scrollTop + (ul.offsetHeight - fudge) - li.offsetHeight);
    //top most position needed for viewing
    var top = ul.scrollTop + fudge;
    if (li.offsetTop <= top){
        //move to top position if LI above it
        //use algebra to subtract fudge from both sides to solve for ul.scrollTop
        ul.scrollTop = li.offsetTop - fudge;
    } else if (li.offsetTop >= bottom) {
        //move to bottom position if LI below it
        //use algebra to subtract ((ul.offsetHeight - fudge) - li.offsetHeight) from both sides to solve for ul.scrollTop
        ul.scrollTop = li.offsetTop - ((ul.offsetHeight - fudge) - li.offsetHeight) ;
    }
};

danke, schön und sauber script

InformationsquelleAutor mseifert

0

Einen quirck for fun:
```
window.location.href = window.location.origin+window.location.pathname+window.location.search+"#343532532523"
```
Was es tut, ist den url-Teile, und legen Sie es wieder mit dem eigentlichen Anker zu Ihrem element

Könnte arbeiten für die meisten Fälle, wenn Ihre Website ist nicht eine webapp Art der Sache =)

Edit: Es gibt keine hin-und Rückfahrt in modernen Browsern, die nur einen Teil der URL sich ändert, ist der Anker. Meine überlegung, wäre es nicht eine webapp ist, dass diese Art von websites in der Regel Bearbeiten Anker und Geschichte.
- Es könnte funktionieren, aber einen roundtrip zum server zu scrollen unten auf der Seite??
- Zumindest im aktuellen chrome und Firefox gibt es keine hin-und Rückfahrt. Außerdem ist es eine Eigenart, sagte zum Spaß, kein Grund zu -1, wenn es funktioniert
- Fair point; -1 entfernt
InformationsquelleAutor Fabiano Soriani
0

Hier ist eine einfache demo, die jQuery verwendet position() um die LI-position innerhalb des übergeordneten UL, dann nutzt animate() scrollen Sie die Kontrollkästchen in Ansicht

http://jsfiddle.net/qKGv8/

API Referenzen:

http://api.jquery.com/position/
http://api.jquery.com/animate/

InformationsquelleAutor charlietfl
0

promptAnswerBlock-->ul-element-id

$('#promptAnswerBlock').scrollTop($('#promptAnswerBlock')[0].scrollHeight + 150);

150 ist nur ein offset-Wert

können Sie einstellen, wie pro Ihre requirment
- Obwohl Ihre Lösung könnte funktionieren, sollten Sie versuchen, ein wenig mehr erklärender text.
InformationsquelleAutor sohan kumawat

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.