2013-12-09 9 views
9

Czy istnieje przewidywalna zależność między narastająco offsetTop elementu <a> a wartością scrollTop po przechodząc do tego <a> elementu?javascript: różnica między scrollTop i offsetTop

Naiwnie zakładałem, że będą one równe, ale spotkałem się z przypadkami, w których scrollTop jest większy (pozycja przewijania znajduje się na dole strony).

Poniżej określone pytanie bardziej precyzyjnie:

function TotalOffsetTop (e) 
{ 
    var offset = 0; 
    do 
     offset += e.offsetTop; 
    while (e = e.offsetParent); 
    return offset; 
} 

//navigate to MyBookmark 
location.hash = "#MyBookmark" 

var BookmarkOffsetTop = TotalOffsetTop(document.getElementByID("MyBookmark")); 
var CurrentPosition = document.getElementsByTagName("body")[0].scrollTop; 

if (CurrentPosition != BookmarkOffsetTop) alert("Design Flaw!"); 

Moim ostatecznym celem jest znalezienie najbliższego <a> tag, którego początek znajduje się powyżej górnej części bieżącej rzutni. Jest tak, że mogę przeskakiwać do tyłu (i dalej) do zakładek w stosunku do aktualnej pozycji w dokumencie.

Czy są jakieś inne środki, które powinienem stosować zamiast scrollTop i kumulatywny offsetTop?

Odkrywam problem za pomocą Chrome, ale chciałbym ostatecznie znaleźć coś, co działa w co najmniej kilku nowoczesnych przeglądarkach. Próbuję unikać jQuery.

+3

+1 za próbę uniknięcia jQuery –

+0

nadzieję, że można przyjąć odpowiedź nie? – Sampath

Odpowiedz

2

Główną różnicą bez uzyskiwania zbyt szczegółowo:

offsetTop jest tylko do odczytu, natomiast scrollTop jest do odczytu/zapisu. Zgodnie z tym, byłbyś na bezpieczniejsze strony, jeśli były w użyciu offsetTop:

Bądź ostrożny o nieruchomości scrollTop elementu html!

W programie Internet Explorer wcześniejszym niż wersja 8 pobiera liczbę przewijanych pikseli w rozmiarze , natomiast w wersji 8 zwraca liczbę w pikselach logicznych w wysokości 1:. Co to znaczy? Jeśli przeglądarka nie jest zgodna z normalnym przybliżeniem (użytkownik może powiększać lub pomniejszać stronę internetową : CTRL i +, CTRL i -), właściwość scrollTop działa inaczej niż wersja 8 niż we wcześniejszych wersjach.

Wielkość przewijania jest obliczana w domyślnym rozmiarze piksela w programie Internet Explorer przed wersją 8, nawet jeśli bieżący rozmiar piksela w dokumencie jest inny. Z Internet Explorera 8 oraz Firefoksa, Opery, Google Chrome i Safari wielkość przewijania jest obliczana w bieżącym rozmiarze piksela.

Na przykład, jeśli poziom powiększenia wynosi 200%, właściwość scrollTop uzyskuje dwa razy większe wartości przed wersją 8 niż z wersji 8 dla tego samego położenia przewijania.

źródło tekstu i więcej informacji na temat tych dwóch: Source

+0

Dzięki! Moje pytanie szukało sposobu na obliczenie różnicy między nimi, ale to daje mi pomysł na refaktoryzację, aby uniknąć problemu 'location.hash =" #MyBookmark "' przewijanie do nieoczekiwanej pozycji. – dlh

Powiązane problemy