是否有可能检查溢出:自动的一个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
其他回答
也许有一个更简单的解决方案。
if ($(document).height() > $(window).height()) {
// scrollbar
}
上面的第一个解决方案只适用于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
一个小插件。
(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;
这扩展了@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
对于那些像我一样使用现代js框架而不是JQuery的可怜人，我将进一步扩展这一点，并被这个线程的人完全抛弃:
这是用Angular 6写的，但如果你写React 16、Vue 2、Polymer、Ionic、React- native，你就知道怎么去适应它了。这是整个组件，所以应该很简单。
import {ElementRef, AfterViewInit} from '@angular/core';
@Component({
selector: 'app',
templateUrl: './app.html',
styleUrls: ['./app.scss']
})
export class App implements AfterViewInit {
scrollAmount;
constructor(
private fb: FormBuilder,
private element: ElementRef
) {}
ngAfterViewInit(){
this.scrollAmount = this.element.nativeElement.querySelector('.elem-list');
this.scrollAmount.addEventListener('wheel', e => { //you can put () instead of e
// but e is usefull if you require the deltaY amount.
if(this.scrollAmount.scrollHeight > this.scrollAmount.offsetHeight){
// there is a scroll bar, do something!
}else{
// there is NO scroll bar, do something!
}
});
}
}
在HTML中会有一个带有类“element -list”的div，它在CSS或SCSS中被风格化，具有不隐藏的高度和溢出值。(自动或滚动)
我在滚动事件时触发这个eval，因为我的最终目标是拥有“自动焦点滚动”，它决定是否在所述组件没有垂直滚动可用时水平滚动整个组件集，否则只垂直滚动其中一个组件的内部。
但是你可以把eval放在其他地方，让它被其他东西触发。
这里需要记住的重要一点是，你永远不会被迫重新使用JQuery，总有一种方法可以在不使用它的情况下访问它的相同功能。
