JSFiddle - React, Tailwind, and code Playground

by Petr Haluza

HTML

<div id="my_div1" style="width: 100px; height:100px; overflow:auto;" class="my_class"> 
  * svislý scroller je ok
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

<div id="my_div2" style="width: 100px; height:100px; overflow:auto;" class="my_class"> 
  * vodorovnýd není ok 2gfdsgdfgsdfgdfgdsfg
</div>

<a id="scrollLeft">xxx</a>-<a id="scrollRight">xxx</a>

CSS

div {
    border: 1px solid red;
}

JavaScript

$("#scrollLeft").click(function(){
    $( "#my_div2" ).scrollLeft( 0 );
});
$("#scrollRight").click(function(){
    $( "#my_div2" ).scrollLeft( 10000 );
    
});

$(function(){
    alert('content 1: ' + $('#my_div1').hasScrollBar());
    alert('content 2: ' + $('#my_div2').hasScrollBar());
});

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