Auto hide scrollbar

[marijnruijl]

I would like the scrollbar to be automatically hidden when there is not enougth items to scroll. Is this possible?

My code ->
Carousel.txt

[ghtsean]

You may set a limit or just define a condition, something like this:

if (items.length <= 1) { scrollBar: $wrap.find('') }else scrollBar: $wrap.find('.scrollbar')

[marijnruijl]

Thanks, I have create a solution with query and css:

$(document).ready(function(){
if ($(".projectbox.slidee:nth-child(4)").hasClass("slidee")) {
$(".scrollbar").addClass('show-me-the-button');
} else {
$(".scrollbar").removeClass('show-me-the-button');
}
});

[sjankowski]

I came up with this function to check if children elements are overflowing the container:

 function checkOverflow (el) {
      var curOverflow = el.style.overflow
      if (!curOverflow || curOverflow === 'visible')
        el.style.overflow = 'hidden'
      var isOverflowing =
        el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight
      el.style.overflow = curOverflow
      return isOverflowing
    }

Then you can use it like:

  `let overflowed = checkOverflow(document.querySelector('.frame'));
    if (overflowed) {
        var scrollbar = $wrap.find('.scrollbar')
    } else {
        var scrollbar = 0;
        $wrap.find('.scrollbar').remove();
    }`

and then use scrollbar variable as value for ScrollBar option:
scrollBar: scrollbar

Hope it helps someone :)