How to Check If a Scrollbar Is Visible

How can I check if a scrollbar is visible?

a little plugin for it.

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

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

demo

Edit

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;

Detect if scrollbar is visible (e.g. on a mobile device)

Based on Doug's hint about comparing offsetWidths, here's a working solution I came up with. Elements with the vscroll class are styled overflow-y: scroll;.

$(document).ready(function () {
    var scrollables = document.getElementsByClassName('vscroll');
    if( scrollables.length && 0 === scrollables[0].offsetWidth - scrollables[0].clientWidth ) {
        for ( const scrollable of scrollables ) {
            scrollable.style.background = 'url("/images/updnarrows_75.png") no-repeat 60% 50%';
        }
    }
});

The image is a set of faded up/down arrows that appear centered in the background of the div.

Check whether HTML element has scrollbars

I found this somewhere a couple of weeks ago. It worked for me.

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = div.scrollWidth > div.clientWidth;
var hasVerticalScrollbar = div.scrollHeight > div.clientHeight;

/* you'll get true/false */

How to check to see if a scrollbar is present in React?

Luke.

By "scrolling is an option" I am assuming here that you mean "when the scrollbar is visible."

As far as I am aware, there is not any way to check for scrollbar visibility using the React API. There is the DOM boolean window.scrollbars.visible; however, I have not had luck with this. It seems to always return true whether a scrollbar is visible or not. The following approach may work for you:

You could set an event listener for onScroll and check window.scrollY. If window.scrollY > 0, then you could conditionally render the button. If window.scrollY is 0, then the page is already scrolled to the top and there is no need to display the button.

Depending on the design of your web app, checking once for scrollbar visibility (e.g., on componentDidMount) may not be the best option, since some DOM elements may continue to load after the component initially mounts and the height of the page may change.

I hope this is helpful.

Detect if the DIV have scroll bar or not

(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..

Taken from How can I check if a scrollbar is visible?

How can I check if a scrollbar is visible or not?

you can check elem.clientHeight < elem.scrollHeight value but it also depends of css properties

Check to see if an iframe has scrollbars visible?

You want to check if the element's scrollHeight is greater than the clientHeight, or if the element's scrollWidth is greater than the clientWidth. This can be done with those properties directly, or by using helper methods provided by jQuery.

MDN: element.scrollHeight

If the element's content generated a vertical scrollbar, 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. When an element's content does not
generate a vertical scrollbar, then its scrollHeight property is equal
to its clientHeight property. This can mean either the content is too
short to require a scrollbar or that the the element has CSS style
overflow value of visible (non-scrollable).

check if a scroll bar is visible in a datagridview

you can try this out:

foreach (var scroll in dataGridView1.Controls.OfType<VScrollBar>())
{
   //your checking here
   //specifically... if(scroll.Visible)
}