是否有可能检查溢出:自动的一个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'):
         }
    }

});

有时内容很短(没有滚动条),有时内容很长(滚动条可见)。


当前回答

对于那些像我一样使用现代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,总有一种方法可以在不使用它的情况下访问它的相同功能。

其他回答

他们给出的大多数答案都让我接近了我想要达到的目标,但还没有达到。

我们基本上想要评估滚动条在正常情况下是否可见,根据定义,body元素的大小大于视图端口。这不是一个提出的解决办法,这就是我提出它的原因。

希望它能帮助到某些人!

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > $(window).height();
    }
})(jQuery);

本质上,我们有hasScrollbar函数,但如果请求的元素大于视图端口,则返回。对于视图端口大小,我们只使用$(window).height()。将其与元素大小进行快速比较,可以产生正确的结果和理想的行为。

你需要element。scrollheight。将其与$(element).height()进行比较。

一个小插件。

(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;

我有一个问题,我需要检查,如果滚动条是可见的整个屏幕(主体)或不。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;
};

我得到主体的宽度,有或没有滚动条,并保存主体的当前溢出状态。然后隐藏滚动条。如果有滚动条,主体的宽度现在会更大。如果不是,宽度是相同的。之后,我恢复溢出状态。

无框架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");
}