How to Add Horizontal Scrollbar to Container | Elementor Tutorial

    

<style>
    .scroll-wrapper {
     cursor: grab;   
    }
    .scroll-wrapper.active {
        cursor: grabbing;
    }
    .scroll-wrapper::-webkit-scrollbar{
      width: 5px;
    }
    .scroll-wrapper::-webkit-scrollbar-track{
      background: #fff;
      border-radius: 10px;
    }
    .scroll-wrapper::-webkit-scrollbar-thumb{
      background: #F4B342;
      border-radius: 10px;
    }
</style>
<script>
jQuery(document).ready(function($){
    const slider = $('.scroll-wrapper');
    let isDown = false;
    let startX;
    let scrollLeft;

    slider.on('mousedown', function (e) {
        isDown = true;
        slider.addClass('active');
        startX = e.pageX - slider.offset().left;
        scrollLeft = slider.scrollLeft();
        return false; // prevent text selection
    });

    $(document).on('mouseup', function () {
        isDown = false;
    });

    slider.on('mousemove', function (e) {
        if (!isDown) return;
        e.preventDefault();
        const x = e.pageX - slider.offset().left;
        const walk = (x - startX) * 2; // drag speed
        slider.scrollLeft(scrollLeft - walk);
    });
  });
</script>