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

[ghtali]

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 :)