另一个简单的答案是:

export const isScrollbarPresent = (element?: HTMLElement) => {
const testedElement = element ?? document.body;
return testedElement.scrollHeight > testedElement.clientHeight; }

我检查元素的scrollHeight是否大于clientHeight。scrollHeight返回一个元素的绝对高度，包括所有不可见的元素。clientHeight返回屏幕上可见的高度。

上面提供的解决方案将在大多数情况下工作，但检查scrollHeight和溢出有时是不够的，可以失败的body和html元素如下所示: https://codepen.io/anon/pen/EvzXZw

1. 解决方案-检查元素是否可滚动:

function isScrollableY (element) {
  return !!(element.scrollTop || (++element.scrollTop && element.scrollTop--));
}

注意:带有overflow: hidden的元素也被视为可滚动的(更多信息)，所以如果需要，你也可以添加一个条件:

function isScrollableY (element) {
    let style = window.getComputedStyle(element);
    return !!(element.scrollTop || (++element.scrollTop && element.scrollTop--)) 
           && style["overflow"] !== "hidden" && style["overflow-y"] !== "hidden";
}

据我所知，这种方法只有在元素具有滚动行为:平滑时才会失败。

解释:诀窍在于，向下滚动和返回的尝试不会被浏览器渲染。最上面的函数也可以写成这样:

function isScrollableY (element) { // if scrollTop is not 0 / larger than 0, then the element is scrolled and therefore must be scrollable // -> true if (element.scrollTop === 0) { // if the element is zero it may be scrollable // -> try scrolling about 1 pixel element.scrollTop++; // if the element is zero then scrolling did not succeed and therefore it is not scrollable // -> false if (element.scrollTop === 0) return false; // else the element is scrollable; reset the scrollTop property // -> true element.scrollTop--; } return true; }

2. 解决方案——做所有必要的检查:

function isScrollableY (element) {
  const style = window.getComputedStyle(element);
  
  if (element.scrollHeight > element.clientHeight &&
      style["overflow"] !== "hidden" && style["overflow-y"] !== "hidden" &&
      style["overflow"] !== "clip" && style["overflow-y"] !== "clip"
  ) {
    if (element === document.scrollingElement) return true;
    else if (style["overflow"] !== "visible" && style["overflow-y"] !== "visible") {
      // special check for body element (https://drafts.csswg.org/cssom-view/#potentially-scrollable)
      if (element === document.body) {
        const parentStyle = window.getComputedStyle(element.parentElement);
        if (parentStyle["overflow"] !== "visible" && parentStyle["overflow-y"] !== "visible" &&
            parentStyle["overflow"] !== "clip" && parentStyle["overflow-y"] !== "clip"
        ) {
          return true;
        }
      }
      else return true;
    }
  }
  
  return false;
}

有两种区域大小需要考虑，窗口和html。例如，如果html宽度大于窗口宽度，那么用户界面上可能会出现滚动条。所以这是一个阅读窗口比例和html比例的问题，并做基本的数学。

至于显示一个箭头覆盖在页面上，这是通过一个简单的类列表切换来完成的，例如。hidden{display:none}

这里有一个跨浏览器的方法来获得这些比例。(W3学分学校)

| | document.body.clientWidth; Var h =窗口。innerHeight || document.documentElement.clientHeight || document.body.clientHeight;所有的颜色

你需要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;

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