how can i check if a scrollbar is visible

how can i check if a scrollbar is visible  using -'javascript,jquery,scroll,overflow'

Is it possible to check the overflow:auto of a div?

For example:


<div id="my_div" style="width: 100px; height:100px; overflow:auto;" class="my_class">
  * content


$('.my_class').live('hover', function (event)
    if (event.type == 'mouseenter')
         if( ...  if scrollbar visible ? ... )


Sometimes is the content short (no scrollbar) and sometimes long (scrollbar visible).

asked Sep 15, 2015 by EarMummery
0 votes

7 Answers

0 votes

a little plugin for it.

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

use it like this,

$('#my_div1').hasScrollBar(); // returns true if there's a `vertical` scrollbar, false otherwise..

tested working on Firefox, Chrome, IE6,7,8

but not working properly on body tag selector



I found out that when you have horizontal scrollbar that causes vertical scrollbar to appear, this function does not work....

I found out another solution... use clientHeight

return this.get(0).scrollHeight > this.get(0).clientHeight;
answered Sep 15, 2015 by JanDannevig
0 votes

This expands on @Reigel's answer. It will return an answer for horizontal or vertical scrollbars.

(function($) {
    $.fn.hasScrollBar = function() {
        var e = this.get(0);
        return {
            vertical: e.scrollHeight > e.clientHeight,
            horizontal: e.scrollWidth > e.clientWidth


element.hasScrollBar()             // Returns { vertical: true/false, horizontal: true/false }
element.hasScrollBar().vertical    // Returns true/false
element.hasScrollBar().horizontal  // Returns true/false
answered Sep 15, 2015 by DomC92
0 votes

I should change a little thing of what Reigel said:

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0) ? this.get(0).scrollHeight > this.innerHeight() : false;

innerHeight counts control's height and its top and bottom paddings

answered Sep 15, 2015 by LYoz
0 votes

I made a new custom :pseudo selector for jQuery to test whether an item has one of the following css properties:

  1. overflow: [scroll|auto]
  2. overflow-x: [scroll|auto]
  3. overflow-y: [scroll|auto]

I wanted to find the closest scrollable parent of another element so I also wrote another little jQuery plugin to find the closest parent with overflow.

This solution probably doesn't perform the best, but it does appear to work. I used it in conjunction with the $.scrollTo plugin. Sometimes I need to know whether an element is inside another scrollable container. In that case I want to scroll the parent scrollable element vs the window.

I probably should have wrapped this up in a single plugin and added the psuedo selector as a part of the plugin, as well as exposing a 'closest' method to find the closest (parent) scrollable container. it is.

$.isScrollable jQuery plugin:

$.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 pseudo selector:

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

$.scrollableparent() jQuery plugin:

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

Implementation is pretty simple

//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();

UPDATE: I found that Robert Koritnik already came up with a much more powerful :scrollable pseudo selector that will identify the scrollable axes and height of scrollable containers, as a part of his $.scrollintoview() jQuery plugin. scrollintoview plugin

Here is his fancy pseudo selector (props):

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


answered Sep 15, 2015 by JuliusBrumba
0 votes

The first solution above works only in IE The second solution above works only in FF

This combination of both functions works in both browsers:

//Firefox Only!!
if ($(document).height() > $(window).height()) {
    // has scrollbar
    alert('scrollbar present - Firefox');
} else {

//Internet Explorer Only!!
(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.innerHeight();
if ($('#monitorWidth1').hasScrollBar()) {
    // has scrollbar
    alert('scrollbar present - Internet Exploder');
} else {
  • Wrap in a document ready
  • monitorWidth1 : the div where the overflow is set to auto
  • mtc : a container div inside monitorWidth1
  • AdjustOverflowWidth : a css class applied to the #mtc div when the Scrollbar is active *Use the alert to test cross browser, and then comment out for final production code.


answered Sep 15, 2015 by HarryBeggsdt
0 votes

You can do this using a combination of the Element.scrollHeight and Element.clientHeight attributes.

According to MDN:

The Element.scrollHeight read-only attribute is a measurement of the height of an element's content, including content not visible on the screen due to overflow. The scrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element padding but not its margin.


The Element.clientHeight read-only property returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.

clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).

Therefore, the element will display a scrollbar if the scroll height is greater than the client height, so the answer to your question is:

function scrollbarVisible(element) {
  return element.scrollHeight > element.clientHeight;
answered Sep 15, 2015 by BradlyTTCYag
0 votes
// - jQuery detect vertical scrollbar function //
(function($) {
    $.fn.has_scrollbar = function() {
        var divnode = this.get(0);
        if(divnode.scrollHeight > divnode.clientHeight)
            return true;


if($('#mydiv').has_scrollbar()) { /* do something */ } 

Tested for IE, chrome. FF

answered Sep 15, 2015 by EffFriend