Cách kiểm tra xem phần tử có ở chế độ xem của người dùng với jquery

Question

Tôi có một cửa sổ lớn có thể kéo div trong cửa sổ của mình. Điều này div có một cửa sổ nhỏ hơn.

<div id="draggable-area" style="width:500px;height:500px;overflow:hidden"> 
<div id="draggable" style="width:5000px;height:5000px"> 
    <ul> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     .... 
    </ul> 
    </div> 
</div> 

Làm cách nào để biết phần tử li có thể hiển thị trong chế độ xem người dùng không?

Answer 1

có một cái nhìn tại this plugin

Nó cung cấp cho của bạn tùy chọn để làm selectors sau

$(":in-viewport") 
$(":below-the-fold") 
$(":above-the-top") 
$(":left-of-screen") 
$(":right-of-screen") 

Answer 2

Để kiểm tra xem một phần tử trong veiwport hiện tại:

function elementInViewport(el) { 
    var top = el.offsetTop; 
    var left = el.offsetLeft; 
    var width = el.offsetWidth; 
    var height = el.offsetHeight; 

    while(el.offsetParent) { 
    el = el.offsetParent; 
    top += el.offsetTop; 
    left += el.offsetLeft; 
    } 

    return (
    top >= window.pageYOffset && 
    left >= window.pageXOffset && 
    (top + height) <= (window.pageYOffset + window.innerHeight) && 
    (left + width) <= (window.pageXOffset + window.innerWidth) 
); 
} 

(Source)

Để có tính năng mạnh mẽ hơn phương pháp, tôi khuyên bạn nên Viewport Selectors, cho phép bạn chỉ cần làm:

$("#elem:in-viewport") 

Answer 3

Giải pháp của tôi đang sử dụng ví dụ mã nhất định, và nó sẽ hiển thị cho bạn một ý tưởng chung của làm thế nào để xác định xem liệu các yếu tố li là nhìn thấy được. Hãy xem jsFiddle chứa mã từ câu hỏi của bạn.

Phương thức jQuery .offset() cho phép chúng tôi lấy lại vị trí hiện tại của một phần tử liên quan đến tài liệu. Nếu bạn bấm vào một phần tử li bên trong có thể kéo, phần bù của bạn từ trên cùng sẽ nằm trong khoảng từ 0 đến 500 và độ lệch từ bên trái phải nằm trong khoảng từ 0 đến 500. Nếu bạn gọi hàm offset của một mục hiện không hiển thị, giá trị chênh lệch sẽ nhỏ hơn 0 hoặc lớn hơn 500 từ giá trị chênh lệch trên cùng hoặc bên trái.

Nếu nó không phải là một nhiệm vụ khó khăn, tôi luôn thích mã những gì tôi cần từ 'scrath' nó mang lại cho tôi sự linh hoạt hơn khi phải sửa đổi hoặc gỡ lỗi, do đó tôi khuyên bạn nên xem xét sử dụng chức năng bù đắp của jQuery thay vì sử dụng plugin . Nếu những gì bạn đang cố gắng thực hiện là khá đơn giản, sử dụng chức năng của riêng bạn sẽ cung cấp cho bạn một thư viện ít hơn để tải.

Answer 4

https://github.com/sakabako/scrollMonitor

var scrollMonitor = require("./scrollMonitor"); // if you're not using require, you can use the scrollMonitor global. 
var myElement = document.getElementById("itemToWatch"); 

var elementWatcher = scrollMonitor.create(myElement); 

elementWatcher.enterViewport(function() { 
    console.log('I have entered the viewport'); 
}); 
elementWatcher.exitViewport(function() { 
    console.log('I have left the viewport'); 
}); 

elementWatcher.isInViewport - true if any part of the element is visible, false if not. 
elementWatcher.isFullyInViewport - true if the entire element is visible [1]. 
elementWatcher.isAboveViewport - true if any part of the element is above the viewport. 
elementWatcher.isBelowViewport - true if any part of the element is below the viewport. 

Answer 5

Tôi đang sử dụng (kiểm tra xem một yếu tố ít nhất là một phần trong giao diện) sau mã:

var winSize; 

function getWindowSize() { 
      var winW,WinH = 0; 
      if (document.body && document.body.offsetWidth) { 
       winW = document.body.offsetWidth; 
       winH = document.body.offsetHeight; 
      } 
      if (document.compatMode == 'CSS1Compat' && 
       document.documentElement && 
       document.documentElement.offsetWidth) { 
       winW = document.documentElement.offsetWidth; 
       winH = document.documentElement.offsetHeight; 
      } 
      if (window.innerWidth && window.innerHeight) { 
       winW = window.innerWidth; 
       winH = window.innerHeight; 
      } 
      return {w:winW, h:winH}; 
     } 

winSize = getWindowSize();  

function inView(element) { 
       var box = element.getBoundingClientRect(); 
       if ((box.bottom < 0) || (box.top > winSize.h)){ 
        return false; 
       } 
       return true; 
      }