JSFiddle - React, Tailwind, and code Playground

by Mark Hendricks

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<div id="wrap">


<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>This is the long horiz content. This is the long horiz content. This is the long horiz content. This is the long horiz content. This is the long horiz content. This is the long horiz content. This is the long horiz content. This is the long horiz content. This is the long horiz content. This is the long horiz content. This is the long horiz content. This is the long horiz content. This is the long horiz content. 
</div>

</div>

CSS

div {
  white-space: nowrap;
}

#wrap {
  display: inline-block;
}

JavaScript

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(hasScroll(document.body, 'vertical'));
alert(hasScroll(document.body, 'horizontal'));

wrap = document.getElementById("wrap");

alert(hasScroll(wrap, 'vertical'));
alert(hasScroll(wrap, 'horizontal'));