खैर ... मुझे यहां हर प्रस्तावित समाधान में कुछ मुद्दे मिले हैं।
- आपको यह चुनने में सक्षम होना चाहिए कि क्या आप चाहते हैं कि संपूर्ण तत्व स्क्रीन पर या इसके किसी भी हिस्से में हो
- प्रस्तावित समाधान विफल हो जाता है यदि तत्व विंडो से अधिक / व्यापक है और थोरा ब्राउज़र विंडो को कवर करता है।
यहाँ मेरा समाधान है कि jQuery
.fn
उदाहरण समारोह और शामिल हैं expression
। मैंने अपने फंक्शन के अंदर और अधिक वैरिएबल बनाए हैं जितना मैं कर सकता था, लेकिन जटिल तार्किक समस्या के लिए मैं इसे छोटे, स्पष्ट रूप से नामित टुकड़ों में विभाजित करना पसंद करता हूं।
मैं ऐसी getBoundingClientRect
विधि का उपयोग कर रहा हूं जो तत्व स्थिति को व्यूपोर्ट में अपेक्षाकृत अधिक लौटाता है इसलिए मुझे स्क्रॉल स्थिति की देखभाल करने की आवश्यकता नहीं है
माइलेज :
$(".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");
स्रोत :
$.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);
};