Я створив новий спеціальний: псевдоселектор для jQuery, щоб перевірити, чи є у елемента один із наступних властивостей css:
- переповнення: [прокручування | авто]
- overflow-x: [прокручування | авто]
- overflow-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. плагін scrollintoview
Ось його фантазійний псевдоселектор (реквізит):
$.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