Detect when touch scroll animation finishes (within a DIV). There is no scrollanimation-end event?

Question

I am scrolling several DIV children .scroll-item within a parent DIV .pathscroll.

I check the scroll position and then reposition the child DIV accordingly. Also a column is shown below, according to the child in the viewport.

HTML code:

<div class="pathscroll">
    <div class="scroll-item" id="1">Montag</div>
    <div class="scroll-item" id="2">Dienstag</div>
    <div class="scroll-item" id="3">Mittwoch</div>
    <div class="scroll-item" id="4">Donnerstag</div>
    <div class="scroll-item" id="5">Freitag</div>
</div>

JS code:

$('body').on('touchend', '.scroll-item', function() 
{
    var scrollitem = $(this);

    // determine most visible scrollitem
    $('.scroll-item').each( function()
    {
        let scrollpos_left = ($(this).offset().left + 100);
        
        if (scrollpos_left>0 && scrollpos_left<320)
        {
            scrollitem = $(this);                   
        }
    });
    
    $('.pathscroll').animate({
        // get scroll position and position of element to the left, then scroll the distance
        scrollLeft: $('.pathscroll').scrollLeft() + scrollitem.offset().left - $('.pathscroll').offset().left - 2,
    }, 200);

    // show the column accordingly
    var pathid = scrollitem.attr('id');

    if ( $('#"'+pathid+'"]:visible').length == 0)
    {
        $('.path-column').hide(150);
        $('#'+pathid).show(150);
    }
});

You can see the problem in the GIF recording: When the user scrolls with a "swing" the DIV still gets scrolled, but the touchend gets triggered too early, resulting in some weird behavior.

How can I check if the DIV is still scrolling, and only then trigger the touchend event or skip the event and just check for an "end of scrolling" event?

Update:

I found out how to detect the scrolling of the parent DIV by:

    var scrollpos_last = 0;
    var scrolling_left = false;

    $('.pathscroll').scroll( function() 
    {
        let scrollpos_now = $(this).scrollLeft();
        scrolling_left = (scrollpos_now < scrollpos_last);
        scrollpos_last = scrollpos_now;
    });

Maybe I can trigger the touchend event after the end of the scroll?! But there is no "scrollend" event as it seems.

Answer 1

Solution, thanks @Kosh.

JS Code:

// Jquery extension (event debouncing), https://stackoverflow.com/a/3701328/1066234
$.fn.scrollEnd = function(callback, timeout) 
{
    $(this).on('scroll', function()
    {
        var $this = $(this);
        if ($this.data('scrollTimeout')) 
        {
            clearTimeout($this.data('scrollTimeout'));
        }
        $this.data('scrollTimeout', setTimeout(callback, timeout));
    });
};

$('.pathscroll').scrollEnd(function()
{
    set_path_scroll_item();
}, 100);

And set_path_scroll_item(); contains the code above in the question.