JSFiddle - React, Tailwind, and code Playground
HTML
<textarea class="scroll-h">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</textarea>
<!-- -->
<textarea class="scroll-v">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</textarea>
CSS
textarea {
width: 300px;
height: 100px;
}
.scroll-h {
white-space: nowrap;
}
JavaScript
function hasScroll( selector, axis ) {
var e = $(selector),
fn = axis == 'x'? 'scrollLeft' : 'scrollTop'
;
return e[fn](1) && e[fn]() > 0 && e[fn](0) && true;
}
function hasScrollX( selector ){
return hasScroll( selector, 'x' );
}
console.log( hasScrollX('.scroll-h') );
console.log( hasScrollX('.scroll-v') );
console.log( hasScroll('.scroll-h') );
console.log( hasScroll('.scroll-v') );