$ (cửa sổ) .scrollTop () so với $ (tài liệu) .scrollTop ()

184

Sự khác biệt giữa:

$(window).scrollTop()

và

$(document).scrollTop()

Cảm ơn.

— tiếng Pháp
nguồn

2

'html' hoặc 'body' cho setter (phụ thuộc vào trình duyệt) ... 'window' cho getter ... cf Fiddle: jsfiddle.net/molokoloco/uCrLa

— molokoloco

149

Cả hai sẽ có tác dụng tương tự .

Tuy nhiên, như đã chỉ ra trong các ý kiến: $(window).scrollTop()được hỗ trợ bởi nhiều trình duyệt web hơn $('html').scrollTop().

— Bodman
nguồn

3

nó trả về 0 trong IE8 (mặc dù trang của tôi ở chế độ quirks, có thể đóng một yếu tố)

— Greg Ogle

38

$ ('html'). scrollTop () không phải là trình duyệt chéo (vì trình cài đặt, nó không hoạt động ít nhất trong Chrome). Cách crossbrowser nhất để làm điều đó bây giờ là: $ (window) .scrollTop () dưới dạng getter, $ ('html, body'). ScrollTop (offset) dưới dạng setter.

— Georgii Ivankin

6

Theo tham chiếu này , không có đối số scrollTopsẽ không cuộn ở bất cứ đâu, mà chỉ trả về vị trí cuộn hiện tại.

— HOẶC Mapper

3

@ d2burke scrollTop()là một getter và scrollTop(value)là một setter. scrollTop()không có đối số sẽ không thay đổi vị trí cuộn.

1

@ M98 window.scrollTo (x, y)

— Bodman

36

Đầu tiên, bạn cần hiểu sự khác biệt giữa windowvà document. Đối windowtượng là một đối tượng phía khách hàng cấp cao nhất. Không có gì ở trên windowđối tượng. JavaScript là một ngôn ngữ hướng đối tượng. Bạn bắt đầu với một đối tượng và áp dụng các phương thức cho các thuộc tính của nó hoặc các thuộc tính của các nhóm đối tượng của nó. Ví dụ, documentđối tượng là một đối tượng của windowđối tượng. Để thay đổi document'màu nền s, bạn muốn thiết lập document' s bgcolortài sản.

window.document.bgcolor = "red"

Để trả lời câu hỏi của bạn, không có sự khác biệt trong kết quả cuối cùng giữa windowvà document scrollTop. Cả hai sẽ cho cùng một đầu ra.

Kiểm tra ví dụ làm việc tại http://jsfiddle.net/7VRvj/6/

Trong sử dụng chung documentchủ yếu để đăng ký các sự kiện và sử dụng windowđể làm những việc như scroll, scrollTop, và resize.

— Hussein
nguồn

Không có sự khác biệt trong kết quả cuối cùng. Cả hai sẽ cho cùng một đầu ra.

— Hussein

Thực tế là không, một số trình duyệt không hỗ trợ cuộn cửa sổ vì đối tượng cửa sổ có thể không phải là đối tượng tràn ra.

— Bodman

11

Trình duyệt nào không hỗ trợ cửa sổ, hãy cụ thể. Dưới đây là một ví dụ jsfiddle.net/7VRvj/4 . Kiểm tra nó trong tất cả các trình duyệt và cho tôi biết trình duyệt nào không hoạt động.

— Hussein

4

Cách trình duyệt chéo làm việc này là

var top = ($(window).scrollTop() || $("body").scrollTop());

— amachree tamunoemi
nguồn

1

Lưu ý: $("body").scrollTop()luôn trả về 0 trong Google Chrome.

— Jonathan Parent Lévesque

2

$("body").scrollTop()không được dùng nữa, không hoạt động trên Chrome hoặc FF nữa . Nó sẽ trả về 0

— Jorge Lazo

0

Tôi vừa gặp một số vấn đề tương tự scrollTopđược mô tả ở đây.

Cuối cùng, tôi đã khắc phục điều này trên Firefox và IE bằng cách sử dụng bộ chọn$('*').scrollTop(0);

Không hoàn hảo nếu bạn có các yếu tố bạn không muốn có hiệu lực nhưng nó có sự khác biệt về Tài liệu, Phần thân, HTML và Cửa sổ. Nếu nó giúp ...

— Tapiochre
nguồn

20

Bạn không bao giờ nên sử dụng * theo cách này (trên thực tế, tránh * hoàn toàn). Thay vì nhắm mục tiêu một yếu tố, bạn đang ảnh hưởng đến toàn bộ DOM. Hiệu suất rất lớn. Bộ chọn phải càng chính xác càng tốt.

— Vlad

2

Cá nhân tôi đã luôn sử dụng $("html,body").scrollTop(val)- không bao giờ có bất kỳ vấn đề nào

— Roi