是否有可能检查溢出:自动的一个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'):
}
}
});
有时内容很短(没有滚动条)，有时内容很长(滚动条可见)。
当前回答
上面的第一个解决方案只适用于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
其他回答
他们给出的大多数答案都让我接近了我想要达到的目标，但还没有达到。
我们基本上想要评估滚动条在正常情况下是否可见，根据定义，body元素的大小大于视图端口。这不是一个提出的解决办法，这就是我提出它的原因。
希望它能帮助到某些人!
(function($) {
$.fn.hasScrollBar = function() {
return this.get(0).scrollHeight > $(window).height();
}
})(jQuery);
本质上，我们有hasScrollbar函数，但如果请求的元素大于视图端口，则返回。对于视图端口大小，我们只使用$(window).height()。将其与元素大小进行快速比较，可以产生正确的结果和理想的行为。
有两种区域大小需要考虑，窗口和html。例如，如果html宽度大于窗口宽度，那么用户界面上可能会出现滚动条。所以这是一个阅读窗口比例和html比例的问题，并做基本的数学。
至于显示一个箭头覆盖在页面上，这是通过一个简单的类列表切换来完成的，例如。hidden{display:none}
这里有一个跨浏览器的方法来获得这些比例。(W3学分学校)
| | document.body.clientWidth; Var h =窗口。innerHeight || document.documentElement.clientHeight || document.body.clientHeight;所有的颜色
这扩展了@Reigel的回答。它将返回水平或垂直滚动条的答案。
(function($) {
$.fn.hasScrollBar = function() {
var e = this.get(0);
return {
vertical: e.scrollHeight > e.clientHeight,
horizontal: e.scrollWidth > e.clientWidth
};
}
})(jQuery);
例子:
element.hasScrollBar() // Returns { vertical: true/false, horizontal: true/false }
element.hasScrollBar().vertical // Returns true/false
element.hasScrollBar().horizontal // Returns true/false
您可以使用Element的组合来做到这一点。scrollHeight和Element。clientHeight属性。
根据MDN:
元素。scrollHeight只读属性是对元素内容高度的测量，包括由于溢出而在屏幕上不可见的内容。scrollHeight值等于元素为了适应视点中的所有内容而不使用垂直滚动条所需的最小clientHeight。它包括元素的填充，但不包括它的边距。
And:
元素。clientHeight只读属性返回元素的内部高度(以像素为单位)，包括填充，但不包括水平滚动条高度、边框或边距。 clientHeight可以计算为CSS高度+ CSS填充-水平滚动条的高度(如果存在的话)。
因此，如果滚动高度大于客户端高度，元素将显示滚动条，所以你的问题的答案是:
function scrollbarVisible(element) {
return element.scrollHeight > element.clientHeight;
}
上面的第一个解决方案只适用于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
