Tôi đã thực hiện một tùy chỉnh mới: bộ chọn giả cho jQuery để kiểm tra xem một mục có một trong các thuộc tính css sau không:
- tràn: [cuộn | tự động]
- tràn-x: [cuộn | tự động]
- tràn-y: [cuộn | tự động]
Tôi muốn tìm cha mẹ có thể cuộn gần nhất của một phần tử khác vì vậy tôi cũng đã viết một plugin jQuery nhỏ khác để tìm cha mẹ gần nhất có tràn.
Giải pháp này có thể không hoạt động tốt nhất, nhưng có vẻ như nó hoạt động. Tôi đã sử dụng nó cùng với plugin $ .scrollTo. Đôi khi tôi cần biết liệu một phần tử có nằm trong một thùng chứa có thể cuộn khác hay không. Trong trường hợp đó, tôi muốn cuộn phần tử cuộn cha mẹ so với cửa sổ.
Tôi có lẽ nên gói nó trong một plugin và thêm bộ chọn psuedo như một phần của plugin, cũng như hiển thị phương thức 'gần nhất' để tìm thùng chứa có thể cuộn (cha mẹ) gần nhất.
Dù sao đi nữa .... đây rồi.
$ .isScrollable plugin 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'
);
};
$ (': có thể cuộn') Bộ chọn giả jQuery:
$.expr[":"].scrollable = function(a) {
var elem = $(a);
return elem.isScrollable();
};
Trình cắm jQuery $ .scrollableparent ():
$.fn.scrollableparent = function(){
return $(this).closest(':scrollable') || $(window); //default to $('html') instead?
};
Thực hiện khá đơn giản
//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();
CẬP NHẬT: Tôi thấy rằng Robert Koritnik đã đưa ra một công cụ chọn giả có thể cuộn mạnh hơn nhiều, sẽ xác định các trục có thể cuộn và chiều cao của các thùng chứa có thể cuộn, như là một phần của plugin jQuery .scrollintoview () của anh ấy. plugin scrollintoview
Đây là bộ chọn giả (đạo cụ) lạ mắt của anh ấy:
$.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