是否有可能检查溢出:自动的一个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()。将其与元素大小进行快速比较,可以产生正确的结果和理想的行为。
上面的第一个解决方案只适用于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在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"
}
至少在新版本的Chrome、Edge、Firefox和Opera上都可以使用。
使用JQuery……
设置这个函数来修复页脚:
function fixFooterCaller()
{
const body = $('body');
const footer = $('body footer');
return function ()
{
// If the scroll bar is visible
if ($(document).height() > $(window).height())
{
// Reset
footer.css('position', 'inherit');
// Erase the padding added in the above code
body.css('padding-bottom', '0');
}
// If the scrollbar is NOT visible
else
{
// Make it fixed at the bottom
footer.css('position', 'fixed');
// And put a padding to the body as the size of the footer
// This makes the footer do not cover the content and when
// it does, this event fix it
body.css('padding-bottom', footer.outerHeight());
}
}
}
它返回一个函数。这样做只是为了设置一次正文和页脚。
然后,在文档准备好时设置这个。
$(document).ready(function ()
{
const fixFooter = fixFooterCaller();
// Put in a timeout call instead of just call the fixFooter function
// to prevent the page elements needed don't be ready at this time
setTimeout(fixFooter, 0);
// The function must be called every time the window is resized
$(window).resize(fixFooter);
});
添加这个到你的页脚css:
footer {
bottom: 0;
}