Я создал новый пользовательский псевдоселектор для jQuery, чтобы проверить, имеет ли элемент одно из следующих свойств css:
- переполнение: [прокрутка | авто]
- overflow-x: [scroll | auto]
- overflow-y: [scroll | auto]
Я хотел найти ближайшего прокручиваемого родителя другого элемента, поэтому я также написал еще один маленький плагин jQuery, чтобы найти ближайшего родителя с переполнением.
Это решение, вероятно, не работает лучше, но, похоже, работает. Я использовал его вместе с плагином $ .scrollTo. Иногда мне нужно знать, находится ли элемент внутри другого прокручиваемого контейнера. В этом случае я хочу прокрутить родительский прокручиваемый элемент против окна.
Мне, вероятно, следовало бы обернуть это в один плагин и добавить селектор psuedo как часть плагина, а также предоставить «ближайший» метод для поиска ближайшего (родительского) прокручиваемого контейнера.
В любом случае ... вот оно.
$. 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'
);
};
$ (': scrollable') 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();
}
});