是否有可能检查溢出:自动的一个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'):
}
}
});
有时内容很短(没有滚动条)，有时内容很长(滚动条可见)。
当前回答
也许有一个更简单的解决方案。
if ($(document).height() > $(window).height()) {
// scrollbar
}
其他回答
我有一个问题，我需要检查，如果滚动条是可见的整个屏幕(主体)或不。Chrome有能力隐藏滚动条，尽管有一个溢出发生的事实，因此主体是可滚动的。
因此，上面的解决方案对我不起作用。我现在检查，如果有滚动条如下方式:
const isScrollbarPresent = () => {
const beforeScrollbarHidden = document.body.clientWidth;
const overflowState = document.body?.style.overflow;
document.body.style.overflow = 'hidden';
const afterScrollbarHidden = document.body.clientWidth;
document.body.style.overflow = overflowState;
return beforeScrollbarHidden !== afterScrollbarHidden;
};
我得到主体的宽度，有或没有滚动条，并保存主体的当前溢出状态。然后隐藏滚动条。如果有滚动条，主体的宽度现在会更大。如果不是，宽度是相同的。之后，我恢复溢出状态。
也许有一个更简单的解决方案。
if ($(document).height() > $(window).height()) {
// scrollbar
}
呃，这里每个人的答案都是不完整的，让我们停止使用jquery在SO答案已经请。如果你想了解jquery的信息，请查看jquery的文档。
下面是一个通用的纯javascript函数，用于测试元素是否具有完整的滚动条:
// dimension - Either 'y' or 'x'
// computedStyles - (Optional) Pass in the domNodes computed styles if you already have it (since I hear its somewhat expensive)
function hasScrollBars(domNode, dimension, computedStyles) {
dimension = dimension.toUpperCase()
if(dimension === 'Y') {
var length = 'Height'
} else {
var length = 'Width'
}
var scrollLength = 'scroll'+length
var clientLength = 'client'+length
var overflowDimension = 'overflow'+dimension
var hasVScroll = domNode[scrollLength] > domNode[clientLength]
// Check the overflow and overflowY properties for "auto" and "visible" values
var cStyle = computedStyles || getComputedStyle(domNode)
return hasVScroll && (cStyle[overflowDimension] == "visible"
|| cStyle[overflowDimension] == "auto"
)
|| cStyle[overflowDimension] == "scroll"
}
有两种区域大小需要考虑，窗口和html。例如，如果html宽度大于窗口宽度，那么用户界面上可能会出现滚动条。所以这是一个阅读窗口比例和html比例的问题，并做基本的数学。
至于显示一个箭头覆盖在页面上，这是通过一个简单的类列表切换来完成的，例如。hidden{display:none}
这里有一个跨浏览器的方法来获得这些比例。(W3学分学校)
| | document.body.clientWidth; Var h =窗口。innerHeight || document.documentElement.clientHeight || document.body.clientHeight;所有的颜色
一个小插件。
(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;
