phần chênh lệch giữa $ (document) .height() và $ (window) .height()

là gì (Hy vọng nó không phải là một bản sao vì tôi không tìm thấy nó khi tìm kiếm và googling)

Tôi cố gắng tìm cách phát hiện trong một số div chiều cao cố định ('#div') khi thanh cuộn đang chạm đến đáy của div thứ hai này. Tôi có nên sử dụng $(document).height() và $(window).height() để phát hiện sự kiện này không?

Chỉnh sửa: div của tôi có chiều cao cố định và tôi đặt tự động cuộn ở đâu, vậy làm cách nào để xử lý? nếu tôi giả sử sử dụng $ ('# div'). height(), chiều cao này là cố định ....

Nguồn

2013-01-24 Newben

'chiều cao document' được tự động thiết lập bởi nội dung và CSS trong khi' chiều cao window' được thiết lập bởi người sử dụng (cửa sổ trình duyệt). – marekful

bạn có thể liên kết sự kiện "cuộn" thành div mà bạn muốn quan sát –

Bạn đã thử nó chưa? Họ trả lại các giá trị khác nhau – Bergi

Trong tài liệu .height():

$(window).height(); // returns height of browser viewport 
$(document).height(); // returns height of HTML document

Trong trường hợp của bạn có vẻ như bạn có thể muốn chiều cao của document chứ không phải là window. Hãy suy nghĩ theo cách này: Chiều cao window là những gì bạn thấy, nhưng chiều cao document bao gồm mọi thứ bên dưới hoặc cao hơn.

EXAMPLE

EDIT:

Kiểm tra đỉnh và đáy trên cuộn với sự giúp đỡ từ scrollTop() phương pháp:

var bottom = $(document).height() - $(window).height(); 

$(document).scroll(function(){ 
    var position = $(this).scrollTop(); 
    if (position === bottom) { 
     console.log("bottom"); 
    }else if(position === 0){ 
     console.log("top"); 
    } else { 
     console.log("scrolling"); 
    } 
});

Nguồn

2013-01-24 14:58:27 Chase

vâng, tôi đã chỉnh sửa bài đăng của mình vì div của tôi được thiết lập tự động cuộn – Newben

Kiểm tra ví dụ đã cập nhật để được trợ giúp thêm. – Chase

Ok cảm ơn rất nhiều, đây là scrollTop() mà tôi đã bỏ lỡ! – Newben

Chiều cao của tài liệu là toàn bộ chiều cao của toàn bộ tài liệu, ngay cả ở bên ngoài khu vực có thể xem được. Điều này có thể là hàng ngàn pixel nếu bạn có một trang dài. Chiều cao cửa sổ chỉ là khu vực có thể xem được.

Nguồn

2013-01-24 14:57:32 Drew

Có, tôi hiểu nhưng tôi đã chỉnh sửa bài đăng vì div của tôi được đặt bằng tự động cuộn – Newben

Vì vậy, bạn có một div có chiều cao cố định và nội dung dài hơn chiều cao đó để tạo thanh cuộn và bạn đang cố gắng để có được chiều cao của nội dung bên trong này, đúng không? Nếu đó là trường hợp tôi tin rằng bạn muốn sử dụng scrollHeight https://developer.mozilla.org/en-US/docs/DOM/element.scrollHeight – Drew

Cũng trong liên kết đó là một ví dụ về những gì tôi nghĩ bạn đang cố gắng để thực hiện: Xác định xem một phần tử đã được cuộn hoàn toàn chưa Sự tương đương sau đây trả về true nếu một phần tử ở cuối cuộn của nó, sai nếu nó không phải là. element.scrollHeight - element.scrollTop === element.clientHeight – Drew

Chiều cao của tài liệu không nhất thiết phải giống như chiều cao của cửa sổ. Nếu bạn có một tài liệu đơn giản chỉ với một DIV và một chút văn bản, chiều cao của tài liệu sẽ được tối thiểu so với chiều cao của cửa sổ.

Nguồn

2013-01-24 14:57:36 syazdani

Dưới đây là các mã từ nguồn jQuery:

if (jQuery.isWindow(elem)) { 
    // As of 5/8/2012 this will yield incorrect results for Mobile Safari, but there 
    // isn't a whole lot we can do. See pull request at this URL for discussion: 
    // https://github.com/jquery/jquery/pull/764 
    return elem.document.documentElement["client" + name]; 
} 

// Get document width or height 
if (elem.nodeType === 9) { 
    doc = elem.documentElement; 

    // Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height], whichever is greatest 
    // unfortunately, this causes bug #3838 in IE6/8 only, but there is currently no good, small way to fix it. 
    return Math.max(
    elem.body["scroll" + name], doc["scroll" + name], 
    elem.body["offset" + name], doc["offset" + name], 
    doc["client" + name]); 
}

Vì vậy, đối với $(window)clientHeight được sử dụng. Trong đó, như @Drew đã đề cập chính xác chiều cao của khu vực màn hình hiển thị.

Đối với $(document) toàn bộ chiều cao cuộn của trang hiện tại sẽ được sử dụng.

Nguồn

2013-01-24 15:02:05

Vì vậy, làm thế nào để đối phó với div của tôi đó là cố định chiều cao và về mà tôi đặt tự động di chuyển? – Newben

huh? những gì bạn đang cố gắng để làm không có bất cứ điều gì để làm với '$ (cửa sổ)' hoặc '$ (tài liệu)' chiều cao. Tất cả những gì bạn cần là 'scrollTop' và' scrollHeight' cho phần tử đó (div bạn đang nói). –

Sự khác biệt giữa hàm $ (window) .height() và $ (document) .height().

$ (window) .height() chức năng:

Lý tưởng nhất là $ (window) .height() trả pixel ít chiều cao của cửa sổ trình duyệt. Đây luôn là chiều cao của cửa sổ trình duyệt hiện tại. Nếu bạn thay đổi kích thước trình duyệt, giá trị này sẽ thay đổi.

$ (tài liệu) .height() chức năng: $ (tài liệu) .height() trả về giá trị điểm ảnh đơn vị ít hơn chiều cao của tài liệu được hiển thị.

Trong HTML nếu bạn không khai báo DOCTYPE thì tất cả các trang HTML trả về $ (cửa sổ) .height() và $ (document) .height() cùng một giá trị.

<html> 
    <head> 
     <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script> 


     <script type='text/javascript'> 

     $(document).ready(function(){ 
      $('#winheight').text($(window).height()); 
      $('#docheight').text($(document).height()); 
     }); 

     </script> 
    </head> 
    <body> 
     <div id="console"> 
      $(window).height() = <span id="winheight"></span> <br/> 
      $(document).height() = <span id="docheight"></span> 
     </div> 
     <p>Lorem ipsum dolor sit amet</p> 
    </body> 
</html>

Output:

$(window).height() = 750 
$(document).height() = 750 
Lorem ipsum dolor sit amet

Sau khi khai báo DOCTYPE lợi nhuận của nó giá trị hoàn hảo.

<!DOCTYPE HTML> 
<html> 
    write above code here 
</html>

Output:

$(window).height() = 750 
$(document).height() = 750 
Lorem ipsum dolor sit amet

Nguồn

2014-08-05 07:11:43

phần chênh lệch giữa $ (document) .height() và $ (window) .height()

Trả lời

Các vấn đề liên quan