如何检查滚动条是否可见?


277

是否可以检查overflow:autodiv的?

例如:

的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'):
         }
    }

});

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

Answers:


376

一个小插件。

(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上运行

但在body标签选择器上无法正常工作

演示


编辑

我发现当您有水平滚动条导致垂直滚动条出现时,此功能不起作用...。

我发现了另一个解决方案...使用 clientHeight

return this.get(0).scrollHeight > this.get(0).clientHeight;

22
如果您有填充,则需要使用> this.innerHeight(); jsfiddle.net/p3FFL/210
jcubic 2012年

2
这样做有一个问题,如果还存在水平滚动条,则即使存在垂直滚动条,直到高度被水平滚动条的高度缩小为止,这也将返回false。
Ally 2012年

为什么两次定义相同的功能?@jcubic
Nitin Sawant

8
请注意,在Mac上,滚动条浮动在内容上方,不使用时消失。在Windows上,它始终可见并且占用水平空间。因此,仅因为可以滚动内容(此功能可以检测到)并不意味着必须存在滚动条。
2014年

2
(function($){$ .fn.hasScrollBar = function(){return this.get(0).scrollWidth> this.width); }})(jQuery); 这适用于水平超调。适用于检查iframe网站中的移动设备响应能力。
亚历山大·尼古拉斯·波帕

56

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

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

这个答案为我工作的检查,如果是DOM使用准备就绪后JQuery的.ready()
简单的睡魔

4
假定滚动条位于窗口中,而不是div元素。建议更改引用以建议:“如果只需要在主窗口上测试滚动条,则可以尝试:”
justdan23

43

您可以结合使用Element.scrollHeightElement.clientHeight属性。

根据MDN:

所述Element.scrollHeight只读属性是一个元素的内容的高度的测量,包括由于溢出内容在屏幕上不可见的。scrollHeight值等于元素所需的最小clientHeight,以便在不使用垂直滚动条的情况下适合视点中的所有内容。它包括元素填充,但不包括其边距。

和:

所述Element.clientHeight只读属性返回一个元件的内部高度,以像素,包括填充但不水平滚动条高度,边框或余量。

可以将clientHeight计算为CSS高度+ CSS填充-水平滚动条的高度(如果有)。

因此,如果滚动高度大于客户端高度,则该元素将显示一个滚动条,因此您的问题的答案是:

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

2
例如:github.com/twbs/bootstrap/blob/master/js/modal.js#L242和+1表示MDN引用和解释!
lowtechsun

铬含量是否具有边框比它不是在scrollHeight属性包括
AT

1
因不浪费时间和使用框架/库而投票。
约翰·约翰(John

小心-这会导致回流,这是性能消耗。gist.github.com/paulirish/5d52fb081b3570c81e3a
Todd Sjolander

43

我应该改变一下雷格所说的话:

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

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


返回(this.get(0))?this.get(0).scrollHeight> this.innerHeight():false;
2012年

3
我认为这应该被指定为正确的答案。这适用于FF35,IE11和Chrome39。
LucasBr

它不检查'overflow'值以确保在满足scrollHeight条件时出现滚动条。
英国电信

1
@BT但是如果我在CSS中将溢出设置为auto,那么我不需要此额外检查吗?它比较大小,就足够了...?
安德鲁

仅对您有用的答案不是答案。.您如何知道其他人的CSS?您的答案没有提到该限制。如果某人不能放弃您的答案并使它起作用,那么它不是一个好答案。
BT

27

这扩展了@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


8

我为jQuery创建了一个新的自定义:pseudo选择器,以测试某项是否具有以下css属性之一:

  1. 溢出:[滚动|自动]
  2. 溢出-x:[scroll | auto]
  3. 溢出-y:[scroll | auto]

我想找到另一个元素的最接近的可滚动父级,因此我还编写了另一个小jQuery插件来查找具有溢出的最接近的父级。

该解决方案可能无法获得最佳性能,但确实可以正常工作。我将其与$ .scrollTo插件结合使用。有时我需要知道某个元素是否在另一个可滚动容器内。在这种情况下,我想滚动父可滚动元素与窗口。

我可能应该将其包装在单个插件中,并将psuedo选择器添加为插件的一部分,并公开“最接近”的方法以查找最接近的(父)可滚动容器。

任何人...在这里。

$ .isScrollable jQuery插件:

$.fn.isScrollable = function(){
    var elem = $(this);
    return (
    elem.css('overflow') == 'scroll'
        || elem.css('overflow') == 'auto'
        || elem.css('overflow-x') == 'scroll'
        || elem.css('overflow-x') == 'auto'
        || elem.css('overflow-y') == 'scroll'
        || elem.css('overflow-y') == 'auto'
    );
};

$(':scrollable')jQuery伪选择器:

$.expr[":"].scrollable = function(a) {
    var elem = $(a);
    return elem.isScrollable();
};

$ .scrollableparent()jQuery插件:

$.fn.scrollableparent = function(){
    return $(this).closest(':scrollable') || $(window); //default to $('html') instead?
};

实施非常简单

//does a specific element have overflow scroll?
var somedivIsScrollable = $(this).isScrollable();
//use :scrollable psuedo selector to find a collection of child scrollable elements
var scrollableChildren = $(this).find(':scrollable');
//use $.scrollableparent to find closest scrollable container
var scrollableparent = $(this).scrollableparent();

更新:我发现罗伯特·科里特尼克(Robert Koritnik)已经提出了一个更强大的:scrollable伪选择器,该伪选择器将识别其可滚动轴和可滚动容器的高度,这是他的$ .scrollintoview()jQuery插件的一部分。scrollintoview插件

这是他喜欢的伪选择器(道具):

    $.extend($.expr[":"], {

    scrollable: function (element, index, meta, stack) {

        var direction = converter[typeof (meta[3]) === "string" && meta[3].toLowerCase()] || converter.both;

        var styles = (document.defaultView && document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(element, null) : element.currentStyle);

        var overflow = {

            x: scrollValue[styles.overflowX.toLowerCase()] || false,

            y: scrollValue[styles.overflowY.toLowerCase()] || false,

            isRoot: rootrx.test(element.nodeName)

        };



        // check if completely unscrollable (exclude HTML element because it's special)

        if (!overflow.x && !overflow.y && !overflow.isRoot)

        {

            return false;

        }



        var size = {

            height: {

                scroll: element.scrollHeight,

                client: element.clientHeight

            },

            width: {

                scroll: element.scrollWidth,

                client: element.clientWidth

            },

            // check overflow.x/y because iPad (and possibly other tablets) don't dislay scrollbars

            scrollableX: function () {

                return (overflow.x || overflow.isRoot) && this.width.scroll > this.width.client;

            },

            scrollableY: function () {

                return (overflow.y || overflow.isRoot) && this.height.scroll > this.height.client;

            }

        };

        return direction.y && size.scrollableY() || direction.x && size.scrollableX();

    }

});

6

上面的第一个解决方案仅在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类*使用警报测试跨浏览器,然后注释掉最终的生产代码。

高温超导


6

(scrollWidth / Height-clientWidth / Height)是滚动条存在的一个很好的指示器,但在许多情况下,它会为您提供“误报”答案。如果您需要准确,我建议使用以下功能。而不是尝试猜测元素是否可滚动-您可以滚动它...

function isScrollable( el ){
  var y1 = el.scrollTop;
  el.scrollTop  += 1;
  var y2 = el.scrollTop;
  el.scrollTop  -= 1;
  var y3 = el.scrollTop;
  el.scrollTop   = y1;
  var x1 = el.scrollLeft;
  el.scrollLeft += 1;
  var x2 = el.scrollLeft;
  el.scrollLeft -= 1;
  var x3 = el.scrollLeft;
  el.scrollLeft  = x1;
  return {
    horizontallyScrollable: x1 !== x2 || x2 !== x3,
    verticallyScrollable: y1 !== y2 || y2 !== y3
  }
}
function check( id ){
  alert( JSON.stringify( isScrollable( document.getElementById( id ))));
}
#outer1, #outer2, #outer3 {
  background-color: pink;
  overflow: auto;
  float: left;
}
#inner {
  width:  150px;
  height: 150px;
}
button {  margin: 2em 0 0 1em; }
<div id="outer1" style="width: 100px; height: 100px;">
  <div id="inner">
    <button onclick="check('outer1')">check if<br>scrollable</button>
  </div>
</div>
<div id="outer2" style="width: 200px; height: 100px;">
  <div id="inner">
    <button onclick="check('outer2')">check if<br>scrollable</button>
  </div>
</div>
<div id="outer3" style="width: 100px; height: 180px;">
  <div id="inner">
    <button onclick="check('outer3')">check if<br>scrollable</button>
  </div>
</div>


在什么情况下会产生误报?
GaloisGirl

5

everyone每个人在这里的答案都是不完整的,请已经停止在SO答案中使用jquery。如果需要有关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"
}

4
为什么要避免在标记为jquery的问题上使用jquery?请添加指向您提到的jquery文档部分的链接。
kpull1

6
@ kpull1太多的人在他们遇到的每个JavaScript问题上都标记了jQuery。这个问题与jQuery有0关系。有无有答案,因为jQuery不这样做jQuery的文档的一部分,也不应该。
英国电信2016年

4

对于那些像我一样使用现代 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中,将存在一个带有“ elem-list”类的div,该div在css或scss中风格化,具有a heightoverflownot值hidden。(如此autosroll

我在滚动事件时触发此评估,因为我的最终目标是拥有“自动焦点滚动”,如果这些组件没有垂直滚动可用,它们将决定是否将整个组件水平滚动,否则仅滚动其中一个组件的内部组件。垂直组件。

但是您可以将eval放在其他位置,以使其受到其他因素的触发。

这里要记住的重要一点是,您永远不会被迫重新使用JQuery,总有一种方法可以不使用它而访问它具有的相同功能。


1
很好奇为什么要监听轮盘事件以检查是否有滚动条。
mix3d

3
另外,由于使用的是箭头功能,因此this保留父作用域;th = this;是没有必要的。
mix3d

1
@ mix3d我个人使用此代码自动在水平滚动和垂直滚动之间切换,基于该滚动在给定的动态元素上具有滚动方向
tatsu

1
回复:这个;它基本上是语法糖(加上不错的速记),用于function(){}.bind(this)
mix3d

1

这是Evan答案的改进版本,似乎可以正确解释溢出逻辑。

            function element_scrollbars(node) {
                var element = $(node);
                var overflow_x = element.css("overflow-x");
                var overflow_y = element.css("overflow-y");
                var overflow = element.css("overflow");
                if (overflow_x == "undefined") overflow_x == "";
                if (overflow_y == "undefined") overflow_y == "";
                if (overflow == "undefined") overflow == "";
                if (overflow_x == "") overflow_x = overflow;
                if (overflow_y == "") overflow_y = overflow;
                var scrollbar_vertical = (
                    (overflow_y == "scroll")
                    || (
                        (
                            (overflow_y == "hidden")
                            || (overflow_y == "visible")
                        )
                        && (
                            (node.scrollHeight > node.clientHeight)
                        )
                    )
                );
                var scrollbar_horizontal = (
                    (overflow_x == "scroll")
                    || (
                        (
                            (overflow_x == "hidden")
                            || (overflow_x == "visible")
                        )
                        && (
                            (node.scrollWidth > node.clientWidth)
                        )
                    )
                );
                return {
                    vertical: scrollbar_vertical,
                    horizontal: scrollbar_horizontal
                };
            }

1

上面提供的解决方案在大多数情况下都可以使用,但是检查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";
}

据我所知,这种方法只有在元素具有时才会失败scroll-behavior: smooth

说明:诀窍是,浏览器不会呈现向下滚动和还原它的尝试。最上面的函数也可以这样编写:

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.documentElement) 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;
}

0

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

0

适用于Chrome浏览器边缘火狐歌剧,至少在新版本。

使用JQuery ...

设置此功能可修复页脚:

function fixFooterCaller()
{
    const body = $('body');
    const footer = $('body footer');

    return function ()
    {
        // If the scroll bar is visible
        if ($(document).height() > $(window).height())
        {
            // Reset
            footer.css('position', 'inherit');
            // Erase the padding added in the above code
            body.css('padding-bottom', '0');
        }
        // If the scrollbar is NOT visible
        else
        {
            // Make it fixed at the bottom
            footer.css('position', 'fixed');
            // And put a padding to the body as the size of the footer
            // This makes the footer do not cover the content and when
            // it does, this event fix it
            body.css('padding-bottom', footer.outerHeight());
        }
    }
}

它返回一个函数。这样就只需要设置一次身体和页脚。

然后,在准备好文档时进行设置。

$(document).ready(function ()
{
    const fixFooter = fixFooterCaller();

    // Put in a timeout call instead of just call the fixFooter function
    // to prevent the page elements needed don't be ready at this time
    setTimeout(fixFooter, 0);
    // The function must be called every time the window is resized
    $(window).resize(fixFooter);
});

将此添加到页脚CSS中:

footer {
    bottom: 0;
}

0

提出的大多数答案使我接近需要达到的目标,但还远远不够。

我们基本上想评估滚动条-在正常情况下是否可见-通过该定义意味着主体元素的尺寸大于视口。这不是一个提出的解决方案,这就是我提交它的原因。

希望它可以帮助某人!

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

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


0

查找具有垂直滚动或正文的当前元素的父级。

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

0

No Framework 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");
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.