Chà ... Tôi đã tìm thấy một số vấn đề trong mọi giải pháp được đề xuất ở đây.
- Bạn có thể chọn nếu bạn muốn toàn bộ phần tử hiển thị trên màn hình hay chỉ bất kỳ phần nào của nó
- Các giải pháp được đề xuất không thành công nếu phần tử cao hơn / rộng hơn cửa sổ và kinda che cửa sổ trình duyệt.
Đây là giải pháp của tôi bao gồm jQuery
.fn
hàm phiên bản và expression
. Tôi đã tạo nhiều biến bên trong hàm hơn mức có thể, nhưng đối với vấn đề logic phức tạp, tôi muốn chia nó thành các phần nhỏ hơn, được đặt tên rõ ràng.
Tôi đang sử dụng getBoundingClientRect
phương thức trả về vị trí phần tử tương đối cho chế độ xem nên tôi không cần quan tâm đến vị trí cuộn
Sử dụng :
$(".some-element").filter(":onscreen").doSomething();
$(".some-element").filter(":entireonscreen").doSomething();
$(".some-element").isOnScreen();
$(".some-element").isOnScreen(true);
$(".some-element").is(":onscreen");
$(".some-element").is(":entireonscreen");
Nguồn :
$.fn.isOnScreen = function(partial){
var t = $(this).first();
var box = t[0].getBoundingClientRect();
var win = {
h : $(window).height(),
w : $(window).width()
};
var topEdgeInRange = box.top >= 0 && box.top <= win.h;
var bottomEdgeInRange = box.bottom >= 0 && box.bottom <= win.h;
var leftEdgeInRange = box.left >= 0 && box.left <= win.w;
var rightEdgeInRange = box.right >= 0 && box.right <= win.w;
var coverScreenHorizontally = box.left <= 0 && box.right >= win.w;
var coverScreenVertically = box.top <= 0 && box.bottom >= win.h;
var topEdgeInScreen = topEdgeInRange && ( leftEdgeInRange || rightEdgeInRange || coverScreenHorizontally );
var bottomEdgeInScreen = bottomEdgeInRange && ( leftEdgeInRange || rightEdgeInRange || coverScreenHorizontally );
var leftEdgeInScreen = leftEdgeInRange && ( topEdgeInRange || bottomEdgeInRange || coverScreenVertically );
var rightEdgeInScreen = rightEdgeInRange && ( topEdgeInRange || bottomEdgeInRange || coverScreenVertically );
var isPartiallyOnScreen = topEdgeInScreen || bottomEdgeInScreen || leftEdgeInScreen || rightEdgeInScreen;
var isEntirelyOnScreen = topEdgeInScreen && bottomEdgeInScreen && leftEdgeInScreen && rightEdgeInScreen;
return partial ? isPartiallyOnScreen : isEntirelyOnScreen;
};
$.expr.filters.onscreen = function(elem) {
return $(elem).isOnScreen(true);
};
$.expr.filters.entireonscreen = function(elem) {
return $(elem).isOnScreen(true);
};