ฉันสร้าง custom ใหม่: pseudo selector สำหรับ jQuery เพื่อทดสอบว่ารายการมีคุณสมบัติ css อย่างใดอย่างหนึ่งต่อไปนี้หรือไม่:
- ล้น: [เลื่อน | อัตโนมัติ]
- overflow-x: [เลื่อน | อัตโนมัติ]
- ล้น - y: [เลื่อน | อัตโนมัติ]
ฉันต้องการค้นหาพาเรนต์ที่เลื่อนได้ใกล้เคียงที่สุดขององค์ประกอบอื่นดังนั้นฉันจึงเขียนปลั๊กอิน 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'
);
};
$ (': เลื่อนได้') ตัวเลือกหลอก 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();
UPDATE:ฉันพบว่า Robert Koritnik มีตัวเลือกที่มีประสิทธิภาพมากขึ้น: ตัวเลือกหลอกแบบเลื่อนได้ที่จะระบุแกนเลื่อนและความสูงของคอนเทนเนอร์แบบเลื่อนได้ซึ่งเป็นส่วนหนึ่งของปลั๊กอิน $ .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