a function to check if a certain element is scrollable, but is NOT showing scrollbars. Useful to use as a test for when you might want to implement another scrolling solution, such as iScroll for iPad.

isItScrollableWithoutVisibleScrollbars.js

var isItScrollableWithoutVisibleScrollbars = function(el) {
	if (el === null) {
		return false;
	}
	var isScrollable = false;
	var hasScrollbars = false;
	// first, lets find out if it has scrollable content
	isScrollable = el.scrollHeight > el.offsetHeight ? true : false;
	// if it's scrollable, let's see if it likely has scrollbars
	if (isScrollable) {
		hasScrollbars = (el.offsetWidth > el.scrollWidth) ? true : false;
	}
	if (isScrollable && !hasScrollbars) {
		return true;
	} else {
		return false;
	}
};

test.js

// example usage

if ( isItScrollableWithoutVisibleScrollbars(plwrap) ) {
	playlistScroll = new iScroll('playlist');
}

sorry for replying to this since it's so old, but people might find it on google as I did. You might also want to edit the function for overflow: hidden because if this is set, then scrollWidth > clientWidth is insufficient for checking if an element is scrollable. I.e., you may apply overflow:hidden to a scrollable element, but the solution in this gist would erroneously report that the given element is scrollable when it is not.

var overflowIsHidden = function(node) {
  var style = getComputedStyle(node);
  return style.overflow === 'hidden' || style.overflowX === 'hidden' || style.overflowY === 'hidden';
}

var isItScrollableWithoutVisibleScrollbars = function(el) {
	if (el === null) {
		return false;
	}
	var isScrollable = false;
	var hasScrollbars = false;
	// first, lets find out if it has scrollable content
	isScrollable = el.scrollHeight > el.offsetHeight ? true : false;
	// if it's scrollable, let's see if it likely has scrollbars
	if (isScrollable) {
		hasScrollbars = (el.offsetWidth > el.scrollWidth) ? true : false;
	}
	if (isScrollable && !hasScrollbars && !overflowIsHidden(el)) {
		return true;
	} else {
		return false;
	}
};

Why el.scrollHeight > el.offsetHeight instead of el.scrollHeight > el.clientHeight?

So what happens when you only want to check if it's scrollable either horizontally or vertically or both, where would one specify that distinction:

I think passing an object that's defined as follows could help

var obj = { el: el, axis: {y: true|false, x: true|false, both: tru| false} };
var isItScrollableWithoutVisibleScrollbars = function(obj) {
if(!obj.el) return;

if(obj.both) {
    return (el.scrollHeight > el.offsetHeight) && (el.offsetWidth > el.scrollWidth);
 }

 if(obj.x && !obj.y) {
   return (el.offsetWidth > el.scrollWidth);
 }

 if(obj.y && !obj.x) {
   return (el.scrollHeight > el.offsetHeight);
 }
};

Ok Jeff T has a refactoring winner here:
https://gist.github.com/1100144

var isItScrollableWithoutVisibleScrollbars = function(el) {
    return (el && (el.scrollHeight > el.offsetHeight) && !(el.offsetWidth > el.scrollWidth));
};

Hello, many thanks!, I based on you short function for make my own and adjust it to my requirements. Every one Feel free to use it as you want guys!

return {
             x: el.offsetWidth > el.scrollWidth
            ,y: el.scrollHeight > el.offsetHeight
        };

@federicoleandroc you should release that as an npm package. "is-scrollable"?

@federicoleandroc you should release that as an npm package. "is-scrollable"?

+1

+1