Сделать вертикальную прокрутку с помощью сенсорной кнопки

Question

Я пытаюсь сделать кнопку с шевроном, чтобы прокрутить строку, но я заблокирован.

Когда я нажимаю кнопку внизу, кнопка шеврона исчезает. Я не вижу в чем проблема: /

стрелка прокрутки После того, как я нажму кнопку, чтобы прокрутить вниз, кнопка исчезла Прокрутите вниз Затем моя кнопка исчезла, но я могу использовать для прокрутки вниз или вверх перемотать

$(document).ready(function () {

        let bottomOfViewDiv = $('.scrollable-content').offset().top + $('.scrollable-content').height();
        let topOfViewDiv = $('.scrollable-content').offset().top;

        let firstCat = $('.categoryHolder:first');
        let lastCat = $('.categoryHolder:last-child');

        let height = firstCat.outerHeight();

        function handleControlVisibility() {
            console.log('top', firstCat.offset().top + height, topOfViewDiv);
            console.log('bottom', lastCat.offset().top, bottomOfViewDiv);
            if ((firstCat.offset().top + height) < topOfViewDiv) {
                $('.scrollable-control-down').removeClass('disabled');
            } else {
                $('.scrollable-control-down').addClass('disabled');
            }
            if (lastCat.offset().top < bottomOfViewDiv) {
                $('.scrollable-control-up').removeClass('disabled');
            } else {
                $('.scrollable-control-up').addClass('disabled');
            }
        }

        $('.scrollable-wrapper').css('height', height*2);
        $('.scrollable-control-down').click(function() {
            let position = parseInt($('.scrollable-content').css('margin-top')) - height;
            $('.scrollable-content').css('margin-top', position + 'px');

            handleControlVisibility();
        });

        $('.scrollable-control-up').click(function() {
            let position = parseInt($('.scrollable-content').css('margin-top')) + height;
            $('.scrollable-content').css('margin-top', position + 'px');

            handleControlVisibility();
        });

        $(".categoryHolder").on("click", function(){
            var id = $(this).data("id");
            window.location.href = "/category/"+id;
        });
    });

 .nav-caret {
        opacity: 0.5;
    }
    .nav-caret:hover {
        opacity: 1;
    }
    .nav-caret.disabled {
        opacity: 0;
    }
    .fa.text-brand {
        color: #fd8900;
    }
    .scrollable-wrapper {
        position:relative;
        height: 300px;
        overflow:hidden;
    }
    .scrollable-content {
        position:absolute;
        margin-top:0;
    }

<div>
        <div class="row justify-content-center">
            <div class="p-4"> <h1>Nos Partenaires</h1></div>
        </div>
        <div class="row justify-content-center">
            <i class="fas fa-chevron-up fa-5x nav-caret scrollable-control-up"></i>
        </div>
        <div class="scrollable-wrapper">
            <div class="row justify-content-center scrollable-content">
                @foreach($categories as $category)
                    <div class="p-2 col-3 my-flex-item categoryHolder" data-id="{{$category->id}}">
                        <div class="icon text-center">
                            <i class="text-brand {{$category->icon ?: 'fa fa-home'}} fa-4x"></i>
                        </div>
                        <div class="title text-center">
                            {!! $category->nom !!}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="row justify-content-center">
            <i class="fas fa-chevron-down fa-5x nav-caret scrollable-control-down"></i>
        </div>
    </div>

перемотать

scroll2

scroll3