SCROLL/možnosti: u DIVu (ve srovnání s dokumentem) – JavaScript, AJAX, jQuery – Fórum – Programujte.com

V dokumentu se dá (pomocí odkazů - bez použití JS) rolovat dlouhým dokumentem s výsledkem:
--> Vybraný prvek opatřený id nebo name(u a=kotvy) atributem je zobrazen.

Lze totéž zprovoznit pomocí JS pro blok se scrollbarem pro určité (popř. mající nějaký atribut) prvky v jeho txt. obsahu ?
Pokud ne - lze testovat, jestli je prvek viditelný (nebo je skrytý mimo view svého containeru) ?

Viditelnost - jedine co muzes kontrolovat primo je hodnota display a visible. Pak ale tame muzes myslim ze pomoci hodnoty (snad jakehokoliv) HTML prvku scrollTop a pak to dopocitat, za predpokladu, ze znas vysku prvku (coz znas). Jinak na rolovani pomoci js se AFAIK pouziva margin - proste ho zvetsujes-zmensujes az do aleluja, a tim vytvaris iluzi rolovani.

Vytvor si stránku, v ktorej budeš mať scrollovací div, a strč do nej niekoľko objektov... tak aby sa div scrolloval. Potom si otvor firebug, daj inspect, vyber ten scrollovací div a v pravom okne firebugu otvor DOM. Uvidíš tak všetky vlastnosti toho objektu.

Scrollovanie sa dá odsledovať a meniť myslím cez scrollLeft a scrollTop; scrollWidth a scrollHeight sú rozmery celej vnútornej oblasti, offsetWidth, offsetHeight sú rozmery viditeľnej oblasti. Potom inspektni objekty vo vnútri a ich polohu (relatívne k rodičovskému objektu) zistíš cez offsetLeft, offsetTop, rozmery offsetWidth, offsetHeight, takže by sa to dalo vyrátať a scrollovat ručne.

Píšem to však len tak, ako sa pamätám, preto si to radšej skontroluj firebugom alebo inde, keď by bol problém tak na to ešte mrknem...

PS: Daj pozor na margin-y a padding-y - niektoré sa zarátavali do niektorých rozmerov a niektoré nie, to si už nepamätám.


EDIT: Ešte som si tak spomenul, clientWidth a clientHeight, to sú myslím skutočné rozmery viditelnej oblasti offsetWidth a offsetHeight započítavajú aj margin. čiže scrollTop sa pohybuje v rozmedzí 0 (celkom hore) do MAX (celkom dole), kde MAX by malo byt rovne scrollHeight (cela oblast) - clientHeight (viditelna oblast)
Hej a všetky spomínané rozmery sú v pixeloch

Představte si, že obsahem DIVu je text obsahující časti, [pro zjednodušení] každá je uvozena nadpisem H4. JS projde text, nalezne všechny objekty H4
a sestaví navigaci => texty nadpisů se stanou texty odkazů, které po kliknutí zobrazí ve výřezu DIVu příslušný nadpis.
PROBLÉM JE ŽE TEXTŮ JE MNOHO (dopředu neznám pozice jejich elementů), ALE KÓD MUSÍ UNIVERZÁLNĚ FUNGOVAT S KAŽDÝM.
HLAVNĚ NEVÍM NAPŘ. NA KOLIKÁTÉM ŘÁDKU BUDE 3.NADPIS (neboť formátování txt.line+block streamu je plně v režii browseru) - a to nepočítám např. event. meziodstavcové mezery atd.
Takže by se hodila nějaká šikovná DOM metoda/vlastnost (pohybovat s obsahem nahoru/dolů popř. nazačátek/nakonec) už umím.
FIREBUG už mi párkrát pomohl; nemáte náhodou odkaz na nějakou kompletní a podrobnou online DOM dokumentaci ?
(dosud jsem čerpal z knih,ale už jsou vrácené)
<ToProg.> Jak čtu znovu tvůj příspěvek, tak mi vychází, že by mi na to mělo stačit použít scrollTop, a vlastnosti offsetTop a xxxHeight, uvidíme...
(offsetTop je myslím vzdálenost TOPparent a TOPelement, žeano ; to bych výšku prvku ani nepotřeboval)

Tak snadný by výpočet scrollTop nebyl, a to v případech, kdy se jedná o zanořený element
např. DIV#SKROLL > DIV#Text > P > A#Name

Naštěstí to jde velmi jednoduše (JS se použije jen ke tvorbě menu):
<a href="#idXX">xxxx</a> odroluje text v DIVu#SKROLL tak, aby se řádek s prvkem o ID="idXX" zobrazil správně jako 1.odshora
(nějak mi uniklo , že toto chování se netýká jen prvků v dokument.okně)

No, ak by sa jednalo o vnorený element, tak jeho polohu musíš rekurzívne spočítavať. offsetLeft/Top vracia relatívnu polohu na parent objekt.

Vyzeralo by to asi takto:

obal = ... // scrollovaci div.

zobraz = ... // objekt ktory treba zobrazit. (nascrolovat sa na neho)



for( var x = 0, y = 0, obj=zobraz ; obj!==obal ; obj=obj.parentNode )

{

  y+=obj.offsetTop;

  x+=obj.offsetLeft;

}



obal.scrollLeft = x;

obal.scrollTop = y;