javascript: sự khác biệt giữa scrollTop và offsetTop

Question

Có mối liên hệ có thể dự đoán được giữa số nguyên tố của một yếu tố <a> và giá trị của scrollTop sau khi điều hướng đến yếu tố <a> đó không?

Tôi đã ngây thơ giả định rằng chúng sẽ bằng nhau, nhưng tôi đã gặp phải các trường hợp trong đó scrollTop lớn hơn (vị trí cuộn tiếp tục xuống dưới trang).

Sau đây xác định các câu hỏi một cách chính xác hơn:

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!"); 

mục tiêu cuối cùng của tôi là để tìm ra <a> thẻ gần mà bắt đầu là ở trên đỉnh của khung nhìn hiện hành. Điều này là để tôi có thể nhảy lùi (và chuyển tiếp) đến các dấu trang liên quan đến vị trí hiện tại trong tài liệu.

Có một số biện pháp khác tôi nên sử dụng thay vì scrollTop và cummulative offsetTop?

Tôi đang khám phá sự cố khi sử dụng Chrome, nhưng cuối cùng tôi muốn tìm thứ gì đó hoạt động trong ít nhất một số trình duyệt hiện đại. Tôi đang cố gắng tránh jQuery.

Answer 1

Sự khác biệt chính mà không đi vào chi tiết quá nhiều:

offsetTop là chỉ đọc, trong khi scrollTop là đọc/ghi. Theo cách này, bạn sẽ ở bên an toàn hơn nếu bạn sử dụng offsetTop:

Hãy cẩn thận về thuộc tính scrollTop của phần tử html!

Trong Internet Explorer trước phiên bản 8, nó truy xuất số lượng ảnh cuộn trong kích thước pixel vật lý, trong khi từ phiên bản 8, nó trả về số tiền ở kích thước pixel hợp lý. Nó có nghĩa là gì? Nếu trình duyệt không phải là ở mức thu phóng thông thường (người dùng có thể phóng to hoặc thu nhỏ trang web : CTRL và +, CTRL và -), thuộc tính scrollTop hoạt động khác với phiên bản 8 so với các phiên bản trước đó.

Số lượng cuộn được tính bằng kích thước pixel mặc định trong Internet Explorer trước phiên bản 8 ngay cả khi kích thước pixel hiện tại trong tài liệu khác. Từ Internet Explorer 8 và trong Firefox, Opera, Google Chrome và Safari, số lượng cuộn được tính theo kích thước pixel hiện tại.

Ví dụ: nếu mức thu phóng là 200%, thuộc tính scrollTop sẽ lấy giá trị lớn hơn hai lần trước phiên bản 8 so với phiên bản 8 cho cùng một vị trí cuộn.

Nguồn cho các văn bản và thông tin thêm về hai: Source