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

});

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


当前回答

这是我的改进:添加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);

其他回答

也许有一个更简单的解决方案。

if ($(document).height() > $(window).height()) {
    // scrollbar
}

这扩展了@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,总有一种方法可以在不使用它的情况下访问它的相同功能。

找到具有垂直滚动或主体的当前元素的父元素。

$.fn.scrollableParent = function() {
    var $parents = this.parents();

    var $scrollable = $parents.filter(function(idx) {
        return this.scrollHeight > this.offsetHeight && this.offsetWidth !== this.clientWidth;
    }).first();

    if ($scrollable.length === 0) {
        $scrollable = $('html, body');
    }
    return $scrollable;
};

它可以通过以下方式自动滚动到当前元素:

var $scrollable = $elem.scrollableParent();
$scrollable.scrollTop($elem.position().top);

您可以使用Element的组合来做到这一点。scrollHeight和Element。clientHeight属性。

根据MDN:

元素。scrollHeight只读属性是对元素内容高度的测量,包括由于溢出而在屏幕上不可见的内容。scrollHeight值等于元素为了适应视点中的所有内容而不使用垂直滚动条所需的最小clientHeight。它包括元素的填充,但不包括它的边距。

And:

元素。clientHeight只读属性返回元素的内部高度(以像素为单位),包括填充,但不包括水平滚动条高度、边框或边距。 clientHeight可以计算为CSS高度+ CSS填充-水平滚动条的高度(如果存在的话)。

因此,如果滚动高度大于客户端高度,元素将显示滚动条,所以你的问题的答案是:

function scrollbarVisible(element) {
  return element.scrollHeight > element.clientHeight;
}