使用触摸按钮进行垂直滚动

Question

我正在尝试使人字形按钮滚动一行，但被阻止了。

当我按下按钮时，人字形按钮的底部消失了。 我没有找到问题所在：/

arrow scroll 我按下按钮向下滚动后，按钮消失了 scroll down 然后我的按钮消失了，但我可以用来向下或向上滚动 scroll

if(true){
    const x=1;
}
console.log(x) // Throws error (x is not defined)

$(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;
    }

scroll

scroll2

scroll3