This method is effective for detecting both horizontal and vertical scrollbars. It relies on determining if the content is too wide or too short, as well as checking if the computed CSS properties allow the display of a scrollbar.
var ScrollableElements = (function() {
var getStyle = document.body && document.body.currentStyle ? function(element) {
return element.currentStyle;
} : function(element) {
return document.defaultView.getComputedStyle(element, null);
};
function getComputedCssProperty(element, property) {
return getStyle(element)[property];
}
function isHorizontalScrollable(element) {
return element.offsetWidth < element.scrollWidth &&
hasScrollBar(getComputedCssProperty(element, 'overflow-x'));
}
function isVerticalScrollable(element) {
return element.offsetHeight < element.scrollHeight &&
hasScrollBar(getComputedCssProperty(element, 'overflow-y'));
}
function hasScrollBar(text) {
return text === 'scroll' || text === 'auto';
}
function containsScrollBar(element) {
return isVerticalScrollable(element) || isHorizontalScrollable(element);
}
return function ElementsWithScrollBars() {
return [].filter.call(document.querySelectorAll('*'), containsScrollBar);
};
})();
ScrollableElements();