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

上面提供的解决方案将在大多数情况下工作，但检查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;
}

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

$.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);

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

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

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