Odrolování na element

V JS stačí elementu, který se má odrolovat, nastavit vlastnost scrollTop/scrollLeft (pro odrolování shora, respektive zleva). Pro opačné strany (zdola, zprava) něco jako scrollBottom/scrollRight neexistuje, ale v podstatě není problém to dopočítat z výšky/šířky elementu).

Nebo je možné použít metodu scrollTo(X-souřadnice, Y-souřadnice) (pro rolování celé stránky pomocí objektu window):

// Odrolovat na 50 px zleva a 100 px shora
window.scrollTo(50, 100);

Posouvání nějakého elementu (např. s overflow: auto) vypadá následovně.

var element = document.getElementById("idecko");
// Odrolovat na 50 px shora
element.scrollTop = 50;

Na rozdíl od zadávání CSS hodnot (element.style.top) není třeba psát jednotky.

O kolik je odrolováno

Prozradí logicky rovněž vlastnosti scrollTop/scrollLeft (přečtením namísto přenastavením).

Podobně jako u baterky je třeba sjednotit chování Chrome s ostatními prohlížeči pomocí:

var hodnota = document.documentElement.scrollTop + document.body.scrollTop

Chrome potřebuje document.body.

Na konkrétní značku…

Tohle byla celkem nuda. Zajímavější je rolovat na nějaké dynamické hodnoty, tj. na souřadnice různých elementů.

Ty lze získat z vlastností offsetTop/offsetLeft, které obsahují souřadnice elementu vůči nejbližšímu předkovi, který souřadnice nuluje (má CSS vlastnost position jinou než static (výchozí), tj. např. relative). Dopočítat umístění vůči oknu u takového (zanořeného) elementu lze rekursí pomocí offsetParent.

Finální kód pro odrolování např. na 5. položku seznamu může vypadat následovně.

var seznam = document.getElementById("list");
seznam.scrollTop = seznam.getElementsByTagName("li")[4].offsetTop;
  • Položka 1
  • Položka 2
  • Položka 3
  • Položka 4
  • Položka 5
  • Položka 6
  • Položka 7
  • Položka 8
  • Položka 9
  • Položka 10
  • Položka 11
  • Položka 12
  • Položka 13
  • Položka 14

Odrolovat na: , ,

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Zvýraznění podle rolování

Označení odkazu na kotvu, pokud je na ní odrolováno

U jednostránkových webů s fixní navigací (s odkazy na #kotvy) může být vhodné právě viditelnou (aktivní) položku zvýraznit.

Zakázat rolování stránky

Jak zakázat scrollování na stránce

Někdy se hodí zamezit uživateli v rolování, jaké existují možnosti?

Změna location.hash bez odrolování stránky

Změna location.hash bez posunu stránky

Jak změnit location.hash bez posunutí stránky.

Odkaz na kotvu a fixní menu

Odkaz na kotvu a fixní hlavička

Při použití fixního menu/hlavičky se stane nepěkná věc, že při odkazu na kotvu je cíl skryt pod menu. Co s tím?

Detekce směru scrollování

Zjištění směru rolování

Jak JavaScriptem zjistit, jakým směrem uživatel na stránce roluje.

Komentáře