मैंने एक नया रिवाज बनाया: jQuery के लिए छद्म चयनकर्ता यह जांचने के लिए कि क्या किसी आइटम में निम्नलिखित सीएसएस गुण हैं:
- अतिप्रवाह: [स्क्रॉल | ऑटो]
- अतिप्रवाह-एक्स: [स्क्रॉल | ऑटो]
- अतिप्रवाह-y: [स्क्रॉल | ऑटो]
मैं किसी अन्य तत्व के निकटतम स्क्रॉल करने योग्य माता-पिता को ढूंढना चाहता था, इसलिए मैंने अतिप्रवाह के साथ निकटतम माता-पिता को खोजने के लिए एक और छोटा jQuery प्लगइन भी लिखा।
यह समाधान शायद सर्वश्रेष्ठ प्रदर्शन नहीं करता है, लेकिन यह काम करता है। मैंने इसे $ .scrollTo प्लगइन के साथ संयोजन में उपयोग किया। कभी-कभी मुझे यह जानने की आवश्यकता होती है कि क्या कोई तत्व किसी अन्य स्क्रॉल करने योग्य कंटेनर के अंदर है। उस मामले में मैं मूल स्क्रॉल करने योग्य तत्व बनाम विंडो को स्क्रॉल करना चाहता हूं।
मुझे संभवतः इसे एक ही प्लगइन में लपेटना चाहिए था और प्लगइन के एक भाग के रूप में psuedo चयनकर्ता को जोड़ा, साथ ही निकटतम (मूल) स्क्रॉल करने योग्य कंटेनर को खोजने के लिए एक 'निकटतम' विधि को उजागर किया।
Anywho .... यहाँ यह है।
$ .isScrollable jQuery प्लगइन:
$.fn.isScrollable = function(){
var elem = $(this);
return (
elem.css('overflow') == 'scroll'
|| elem.css('overflow') == 'auto'
|| elem.css('overflow-x') == 'scroll'
|| elem.css('overflow-x') == 'auto'
|| elem.css('overflow-y') == 'scroll'
|| elem.css('overflow-y') == 'auto'
);
};
$ (': स्क्रॉल करने योग्य') jQuery का छद्म चयनकर्ता:
$.expr[":"].scrollable = function(a) {
var elem = $(a);
return elem.isScrollable();
};
$ .scrollableparent () jQuery प्लगइन:
$.fn.scrollableparent = function(){
return $(this).closest(':scrollable') || $(window); //default to $('html') instead?
};
कार्यान्वयन बहुत सरल है
//does a specific element have overflow scroll?
var somedivIsScrollable = $(this).isScrollable();
//use :scrollable psuedo selector to find a collection of child scrollable elements
var scrollableChildren = $(this).find(':scrollable');
//use $.scrollableparent to find closest scrollable container
var scrollableparent = $(this).scrollableparent();
अद्यतन करें: मैंने पाया कि रॉबर्ट कोरिटनिक पहले से ही बहुत अधिक शक्तिशाली हैं: स्क्रॉल करने योग्य छद्म चयनकर्ता जो स्क्रॉल करने योग्य कुल्हाड़ियों और स्क्रॉल करने योग्य कंटेनरों की ऊंचाई की पहचान करेंगे, उनके $ .scrollintoview () jQuery प्लगइन के एक भाग के रूप में। स्क्रोलिनव्यू प्लगइन
यहाँ उनके फैंसी छद्म चयनकर्ता (प्रॉप्स) हैं:
$.extend($.expr[":"], {
scrollable: function (element, index, meta, stack) {
var direction = converter[typeof (meta[3]) === "string" && meta[3].toLowerCase()] || converter.both;
var styles = (document.defaultView && document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(element, null) : element.currentStyle);
var overflow = {
x: scrollValue[styles.overflowX.toLowerCase()] || false,
y: scrollValue[styles.overflowY.toLowerCase()] || false,
isRoot: rootrx.test(element.nodeName)
};
// check if completely unscrollable (exclude HTML element because it's special)
if (!overflow.x && !overflow.y && !overflow.isRoot)
{
return false;
}
var size = {
height: {
scroll: element.scrollHeight,
client: element.clientHeight
},
width: {
scroll: element.scrollWidth,
client: element.clientWidth
},
// check overflow.x/y because iPad (and possibly other tablets) don't dislay scrollbars
scrollableX: function () {
return (overflow.x || overflow.isRoot) && this.width.scroll > this.width.client;
},
scrollableY: function () {
return (overflow.y || overflow.isRoot) && this.height.scroll > this.height.client;
}
};
return direction.y && size.scrollableY() || direction.x && size.scrollableX();
}
});
> this.innerHeight();jsfiddle.net/p3FFL/210