对于那些像我一样使用现代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);

我应该修改一下雷盖尔的话

(function($) {
    $.fn.hasScrollBar = function() {
        return this[0] ? this[0].scrollHeight > this.innerHeight() : false;
    }
})(jQuery);

innerHeight计数控件的高度及其顶部和底部填充

呃，这里每个人的答案都是不完整的，让我们停止使用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;所有的颜色

上面的第一个解决方案只适用于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