是否有可能检查溢出:自动的一个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'):
}
}
});
有时内容很短(没有滚动条)，有时内容很长(滚动条可见)。
当前回答
他们给出的大多数答案都让我接近了我想要达到的目标，但还没有达到。
我们基本上想要评估滚动条在正常情况下是否可见，根据定义，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
一个小插件。
(function($) {
$.fn.hasScrollBar = function() {
return this.get(0).scrollHeight > this.height();
}
})(jQuery);
像这样用，
$('#my_div1').hasScrollBar(); // returns true if there's a `vertical` scrollbar, false otherwise..
测试工作在Firefox, Chrome, IE6,7,8
但在主体标签选择器上不能正常工作
demo
Edit
我发现，当你有水平滚动条，导致垂直滚动条出现，这个功能不工作....
我找到了另一个解决办法…使用clientHeight
return this.get(0).scrollHeight > this.get(0).clientHeight;
这是我的改进:添加parseInt。出于某种奇怪的原因，没有它就不能工作。
// usage: jQuery('#my_div1').hasVerticalScrollBar();
// Credit: http://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible
(function($) {
$.fn.hasVerticalScrollBar = function() {
return this.get(0) ? parseInt( this.get(0).scrollHeight ) > parseInt( this.innerHeight() ) : false;
};
})(jQuery);
无框架JavaScript方法，检查垂直和水平
/*
* hasScrollBars
*
* Checks to see if an element has scrollbars
*
* @returns {object}
*/
Element.prototype.hasScrollBars = function() {
return {"vertical": this.scrollHeight > this.style.height, "horizontal": this.scrollWidth > this.style.width};
}
像这样使用它
if(document.getElementsByTagName("body")[0].hasScrollBars().vertical){
alert("vertical");
}
if(document.getElementsByTagName("body")[0].hasScrollBars().horizontal){
alert("horizontal");
}
