JavaScript
Article

jQuery check if horizontal scroll is present

By Sam Deering

jQuery function to check if horizontal scroll is present – hasHScrollBar() – (or vertical check below also, util function to check if an element has a scrollbar present).

jQuery hasHScrollBar() Function

//util function to check if an element has a scrollbar present
  jQuery.fn.hasScrollBar = function(direction)
  {
    if (direction == 'vertical')
    {
      return this.get(0).scrollHeight > this.innerHeight();
    }
    else if (direction == 'horizontal')
    {
      return this.get(0).scrollWidth > this.innerWidth();
    }
    return false;

  }
  //$('#c3 .mbcontainercontent').hasScrollBar('horizontal');

Similar functions:

//util function to check if an element has a horizontal scrollbar present
  jQuery.fn.hasHScrollBar = function()
  {
    // log(this.get(0).scrollWidth);
    // log(this.width());
    // log(this.innerWidth());
      return this.get(0).scrollWidth > this.innerWidth();
  }
  $('#c3 .mbcontainercontent').hasScrollBar();

  //util function to check if an element has a vertical scrollbar present
  jQuery.fn.hasVScrollBar = function()
  {
    // log(this.get(0).scrollHeight);
    // log(this.height());
    // log(this.innerHeight());
      return this.get(0).scrollHeight > this.innerHeight();
  }
  $('#c3 .mbcontainercontent').hasScrollBar();

Another version…

function hasScroll(el, direction) {
    direction = (direction === 'vertical') ? 'scrollTop' : 'scrollLeft';
    var result = !! el[direction];

    if (!result) {
        el[direction] = 1;
        result = !!el[direction];
        el[direction] = 0;
    }
    return result;
}

alert('vertical? ' + hasScroll(document.body, 'vertical'));
alert('horizontal? ' + hasScroll(document.body, 'horizontal'));
  • Suj

    Awesome, top one seems to work perfectly.

  • Matteo Bottazzi

    Thank you

  • http://martin-alker.de Martin Alker

    Helpful – thank you

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.