是否有可能检查溢出:自动的一个div?
例如:
HTML
<div id="my_div" style="width: 100px; height:100px; overflow:auto;" class="my_class">
* content
</div>
JQUERY
$('.my_class').live('hover', function (event)
{
if (event.type == 'mouseenter')
{
if( ... if scrollbar visible ? ... )
{
alert('true'):
}
else
{
alert('false'):
}
}
});
有时内容很短(没有滚动条)，有时内容很长(滚动条可见)。
当前回答
您可以使用Element的组合来做到这一点。scrollHeight和Element。clientHeight属性。
根据MDN:
元素。scrollHeight只读属性是对元素内容高度的测量，包括由于溢出而在屏幕上不可见的内容。scrollHeight值等于元素为了适应视点中的所有内容而不使用垂直滚动条所需的最小clientHeight。它包括元素的填充，但不包括它的边距。
And:
元素。clientHeight只读属性返回元素的内部高度(以像素为单位)，包括填充，但不包括水平滚动条高度、边框或边距。 clientHeight可以计算为CSS高度+ CSS填充-水平滚动条的高度(如果存在的话)。
因此，如果滚动高度大于客户端高度，元素将显示滚动条，所以你的问题的答案是:
function scrollbarVisible(element) {
return element.scrollHeight > element.clientHeight;
}
其他回答
找到具有垂直滚动或主体的当前元素的父元素。
$.fn.scrollableParent = function() {
var $parents = this.parents();
var $scrollable = $parents.filter(function(idx) {
return this.scrollHeight > this.offsetHeight && this.offsetWidth !== this.clientWidth;
}).first();
if ($scrollable.length === 0) {
$scrollable = $('html, body');
}
return $scrollable;
};
它可以通过以下方式自动滚动到当前元素:
var $scrollable = $elem.scrollableParent();
$scrollable.scrollTop($elem.position().top);
这里是Evan的答案的改进版本，它似乎正确地解释了溢出逻辑。
function element_scrollbars(node) {
var element = $(node);
var overflow_x = element.css("overflow-x");
var overflow_y = element.css("overflow-y");
var overflow = element.css("overflow");
if (overflow_x == "undefined") overflow_x == "";
if (overflow_y == "undefined") overflow_y == "";
if (overflow == "undefined") overflow == "";
if (overflow_x == "") overflow_x = overflow;
if (overflow_y == "") overflow_y = overflow;
var scrollbar_vertical = (
(overflow_y == "scroll")
|| (
(
(overflow_y == "hidden")
|| (overflow_y == "visible")
)
&& (
(node.scrollHeight > node.clientHeight)
)
)
);
var scrollbar_horizontal = (
(overflow_x == "scroll")
|| (
(
(overflow_x == "hidden")
|| (overflow_x == "visible")
)
&& (
(node.scrollWidth > node.clientWidth)
)
)
);
return {
vertical: scrollbar_vertical,
horizontal: scrollbar_horizontal
};
}
上面的第一个解决方案只适用于IE 上述第二种解决方案仅适用于FF
这两个函数的组合在两种浏览器中都有效:
//Firefox Only!!
if ($(document).height() > $(window).height()) {
// has scrollbar
$("#mtc").addClass("AdjustOverflowWidth");
alert('scrollbar present - Firefox');
} else {
$("#mtc").removeClass("AdjustOverflowWidth");
}
//Internet Explorer Only!!
(function($) {
$.fn.hasScrollBar = function() {
return this.get(0).scrollHeight > this.innerHeight();
}
})(jQuery);
if ($('#monitorWidth1').hasScrollBar()) {
// has scrollbar
$("#mtc").addClass("AdjustOverflowWidth");
alert('scrollbar present - Internet Exploder');
} else {
$("#mtc").removeClass("AdjustOverflowWidth");
}
准备好文档 monitorWidth1:溢出设置为auto的div mtc: monitorWidth1中的容器div AdjustOverflowWidth:当滚动条激活时应用到#mtc div的css类 *使用警报测试跨浏览器，然后注释为最终的产品代码。
HTH
我为jQuery做了一个新的自定义:pseudo选择器来测试一个项目是否具有以下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'
);
};
$(':scrollable') jQuery伪选择器:
$.expr[":"].scrollable = function(a) {
var elem = $(a);
return elem.isScrollable();
};
jQuery插件$.scrollableparent()
$.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已经提出了一个更强大的:可滚动的伪选择器，它将识别可滚动容器的可滚动轴和高度，作为他的$.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();
}
});
(scrollWidth/Height - clientWidth/Height)是滚动条存在的一个很好的指示器，但在很多情况下它会给你一个“假阳性”的答案。 如果你需要精确，我建议使用下面的函数。 而不是试图猜测元素是否可滚动—您可以滚动它…
function isScrollable( el ){ var y1 = el.scrollTop; el.scrollTop += 1; var y2 = el.scrollTop; el.scrollTop -= 1; var y3 = el.scrollTop; el.scrollTop = y1; var x1 = el.scrollLeft; el.scrollLeft += 1; var x2 = el.scrollLeft; el.scrollLeft -= 1; var x3 = el.scrollLeft; el.scrollLeft = x1; return { horizontallyScrollable: x1 !== x2 || x2 !== x3, verticallyScrollable: y1 !== y2 || y2 !== y3 } } function check( id ){ alert( JSON.stringify( isScrollable( document.getElementById( id )))); } #outer1, #outer2, #outer3 { background-color: pink; overflow: auto; float: left; } #inner { width: 150px; height: 150px; } button { margin: 2em 0 0 1em; } <div id="outer1" style="width: 100px; height: 100px;"> <div id="inner"> <button onclick="check('outer1')">check if<br>scrollable</button> </div> </div> <div id="outer2" style="width: 200px; height: 100px;"> <div id="inner"> <button onclick="check('outer2')">check if<br>scrollable</button> </div> </div> <div id="outer3" style="width: 100px; height: 180px;"> <div id="inner"> <button onclick="check('outer3')">check if<br>scrollable</button> </div> </div>
