我为jQuery创建了一个新的自定义:pseudo选择器,以测试某项是否具有以下css属性之一:
- 溢出:[滚动|自动]
- 溢出-x:[scroll | auto]
- 溢出-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();
更新:我发现罗伯特·科里特尼克(Robert Koritnik)已经提出了一个更强大的:scrollable伪选择器,该伪选择器将识别其可滚动轴和可滚动容器的高度,这是他的$ .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