2011-10-19 38 views
7

tôi muốn kiểm tra xem trang được cuộn sau khi đã tải xong và tôi đang sử dụng mã này:scrollTop() trả về 0 trong chrome

$(document).ready(function(){ 
    alert($(window).scrollTop()); 
}); 

Nó hoạt động tốt trong Firefox nhưng allways trả 0 trong Chrome. Tại sao điều này?

+0

tình hình là gì? Bạn đang kiểm tra xem khách truy cập đã truy cập trang của bạn bằng thẻ #hash chưa? Hay bạn đang kiểm tra xem khách truy cập đã cuộn trước khi tài liệu tải xong chưa? hoặc cả hai? –

+1

Tôi đang chạy một hoạt ảnh trên các yếu tố vừa cuộn vào chế độ xem. nhưng nếu u cuộn xuống trang và nhấn làm mới. trang tải lại được cuộn tự động đến điểm cuộn trước đó (trước khi làm mới) vì vậy tôi muốn biết vị trí cuộn của cửa sổ để xác định các yếu tố trên trang đã cuộn vào chế độ xem và bắt đầu hoạt ảnh –

Trả lời

2

$(window).scrollTop() sẽ trả lại 0 khi cửa sổ không thể cuộn được.

0

Hãy thử mã sau trong trang có một số văn bản và liên kết ở cuối trang. Hãy nhớ để có đủ văn bản hoặc dòng trống để làm cho một cuộn của trang cho đến khi bạn có thể thấy nút của tôi

$(document).ready(function() { 
     alert($(window).scrollTop()); // first load if you did not scroll = 0 
     $("#button").click(function() { alert($(window).scrollTop()); }); 
     // hitting the button that is located on bottom of page 
     // - i had to scroll the page = xxx (68 in may case) 
    }); 

Đó là điều bình thường trong trường hợp của bạn để nhận được 0 bởi vì trang không cuộn, bù đắp giữa vị trí của bạn và đầu trang là 0.

Tôi đã thử trong Chrome, FF6, IE9. Tôi hy vọng tôi rất hữu ích.

+1

nhấp vào nút #button để nhận .scrollTop () không phải là vấn đề .. nếu u di chuyển xuống trang và nhấn làm mới. trang sẽ loade từ điểm u cuộn đến (pre refresh) .. và đó là vị trí tôi muốn biết. và nếu u làm điều đó trong FF sẽ xuất ra giá trị corect. trong Chrome 14.0, nó trả về 0. –

4

Trên thực tế Firefox là trình duyệt duy nhất không trả về 0 cho $ (cửa sổ) .scrollTop() trên domReady hoặc window.onload. Chrome, Safari và IE tất cả trở về 0. Cách duy nhất an toàn để có được đúng vị trí của thanh cuộn trên domReady là, như đã đề cập trong câu trả lời khác ở trên, để thiết lập một event handler về sự kiện cuộn cửa sổ như dưới đây:

$(document).ready(function(){ 
    $(window).scroll(function() { 
     console.log($(window).scrollTop()); 
     $(window).unbind('scroll'); 
    }); 
}); 
+0

Tôi thực sự không hiểu tại sao mọi người lại bình chọn câu trả lời của bạn. Điều này thực sự hiệu quả. Ngoài ra, tôi đã quan sát thấy Chrome sẽ kích hoạt sự kiện cuộn hai lần. Đầu tiên trên tải trang bình thường và lần thứ hai nếu cuộn đến vị trí trước đó, người dùng (ví dụ: sau khi nhấn F5 để tải lại trang). – Fleshgrinder

2

Các chrome khôi phục vị trí cuộn trước khi làm mới khi DOM được tải. Vì vậy, việc cuộn scrollTop trên sự kiện cuộn thay vì sự kiện sẵn sàng sẽ hoạt động.

2

Tôi cũng gặp sự cố rằng scrollTop() luôn trả về 0 trong Chrome, cho dù tôi đã sử dụng nó trên window, trên document hoặc trên 'html,body'. Cuối cùng tôi đã phát hiện ra rằng css là vấn đề:

html, body { 
    height: 100%; 
    overflow-x: hidden; 
} 

Thực ra, tôi không biết chính xác lý do vì sao bạn có thể xóa các phần của mã này và sau đó lại hoạt động trở lại. Lạ nhưng vấn đề giải quyết;)

+0

cảm ơn bạn rất nhiều! nó thực sự là lạ! Làm việc trên Safari nhưng không phải trên chrome, sau khi tôi thêm vào css của tôi, cả hai hoạt động trên cả hai trình duyệt! – bbnn

0

tôi đã cùng một vấn đề nhưng đã cố định bằng cách thêm việc kê khai tài liệu:

<!DOCTYPE html> 
Các vấn đề liên quan