Hoe gaat u een item in een scrollable div. naar de top

Ik heb een #contact-list-scroller div loopt in de pagina. Op basis van een contact_XXXX ID ik zou graag de #contact-list-scroller scroll positie om te wedden ingesteld om ervoor te zorgen dat de contact_XXX item is aan de bovenkant van de pagina.

<div id="contact-list-scroller">
   <div id="contact_8965">stuff</div>
   <div id="contact_8966">stuff</div>
   <div id="contact_8967">stuff</div>
   <div id="contact_8968">stuff</div>
   <div id="contact_8969">stuff</div>
   .....
</div>

Hier is wat ik tot dusver:

$('#contact-list-scroller').scrollTop($('#contact_' + id).scrollTop());

Maar dat is gewoon scrollen naar de top. Ideeën? Dankzij

  • hetzelfde probleem, position().top werkt niet iedere keer, vond een oplossing ?

 

5 Replies
  1. 30

    Ik denk dat je moet positie().top. Omdat de waarden die worden geretourneerd door de positie() zijn ten opzichte van de bovenliggende (in tegenstelling tot offset()), het maakt je code meer flexibel. Als u de positie van de bovenliggende container uw code niet zal breken.

    Voorbeeld:

    var contactTopPosition = $("#contact_8967").position().top;
    $("#contact-list-scroller").scrollTop(contactTopPosition);

    of geanimeerde:

    $("#contact-list-scroller").animate({scrollTop: contactTopPosition});

    Zie jsfiddle: http://jsfiddle.net/5zf9s/

    • Vreemd dat klinkt logisch, maar werkt niet in mijn app. Misschien is het omdat ik met absolute positionering…
    • Misschien omdat het nt, rekening houdend met de huidige scroll-positie?
    • Ook als het een erg lange lijst, die eindigt in het retourneren van een contactTopPosition van -2311 enz..
    • Mijn demo is met behulp van dezelfde css als u geplaatst in de comments hieronder. Het kind divs contact-list-scroller ingericht op een bepaalde manier? Misschien een live demo kan ik kijken?
    • Het werkt in eerste instantie maar voor een of andere reden werkt het niet consequent en herhaaldelijk… ik voegde een aantal knoppen in een andere versie van dezelfde demo: jsfiddle.net/5zf9s/88
  2. 10

    Zelfs ik had dezelfde situatie en wilde schuiven element naar boven. Nu, er is een directe ondersteuning voor dit probleem.

    Gewoon gebruik maken van <element>.scrollIntoView(true) JavaScript-methode.


    Voorbeeld:

    document.getElementById("yourElementId").scrollIntoView(true);


    Meer Info:

    Hoewel dit experimentele nu, binnenkort krijgt ondersteuning in elke browser. U kan meer informatie vinden op deze op : MDN

    • Ik zie dat dit antwoord is meer dan een jaar oud, maar ik heb geprobeerd deze oplossing van vandaag op Chrome en het werkt. FYI
    • scrollIntoView werkte niet voor mij. Ik heb een div die wordt weergegeven wanneer de muisaanwijzer op een nav artikel, in die div-ik heb 2 divs. De ene is slechts een lijst, de andere is een andere div-dat is schuifbaar en inhoud heeft verborgen. Wanneer ze met de muis over een item aan de linkerkant, ik wil de div op de rechts om naar het gedeelte over die zweefde over het item. scrollIntoView rollen die div correct, maar ook schuift de hele pagina lichaam naar beneden tot aan de top van div.
  3. 1

    Na het proberen van al het bovenstaande met geen succes vond ik dit op W3schools:

    JS:

    var elmnt = document.getElementById("Top");
    elmnt.scrollIntoView();

  4. 0
    var scrollTop = $('#contact_' + id).offset().top;
    
    $('#contact-list-scroller').attr('scrollTop', scrollTop);

    jsFiddle.

    • Bedankt maar dat lijkt niet te werken. Doet het beslag als #contact-list-scroller heeft de volgende CSS: position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;
    • U overwegen gebruik te maken position() in plaats van offset(). De 1e wordt in vergelijking met de ouder, de laatste in vergelijking met het document.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *