javascript - 如果滑动分别在开始或结束时如何隐藏箭头

Question

我有一个带有左右箭头移动的水平滑动列表，我也可以向右滑动。现在，当我单击右箭头并到达末尾时，右箭头被隐藏，反之亦然。但是当我向右或向左滑动并到达结束/开始时，箭头不会隐藏。如果我通过滑动到达最后，如何隐藏右箭头？

我的 HTML 代码：

<div id="imageSlider1" class="catalog-slider">
    <div class="catalog-cover">
        <i class="iccircle-left move-left left-button"></i>
        <ul class="sliderWrapper1 catalog-list corporate-projects">
                    <a class="slide" href="#A">
                       <li class="catalog-item"><img src="#imgA" alt="{{ $tags[$i] }}">List A</li>
                    </a>
                    <a class="slide" href="#B">
                       <li class="catalog-item"><img src="#imgB" alt="{{ $tags[$i] }}">List B</li>
                    </a>
                    <a class="slide" href="#C">
                       <li class="catalog-item"><img src="#imgC" alt="{{ $tags[$i] }}">List C</li>
                    </a>
                    <a class="slide" href="#D">
                       <li class="catalog-item"><img src="#imgD" alt="{{ $tags[$i] }}">List D</li>
                    </a>
                    <a class="slide" href="#E">
                       <li class="catalog-item"><img src="#imgE" alt="{{ $tags[$i] }}">List E</li>
                    </a>
        </ul>
        <i class="iccircle-right right-button move-right"></i> 
    </div>
</div>

我的Javascript代码：

 if($(".sliderWrapper1").prop('scrollWidth') > $(".catalog-cover").width())
    {
    $('.left-button, .right-button').show();
    }
else
    {
    $('.left-button, .right-button').hide();
    };

const slider = document.querySelector(".catalog-list");
const preventClick = (e) => {
    e.preventDefault();
    e.stopImmediatePropagation();
}
let isDown = false;
let isDragged = false;
let startX;
let scrollLeft;
if(slider){


slider.addEventListener("mousedown", e => {
    isDown = true;
    slider.classList.add("active");
    startX = e.pageX - slider.offsetLeft;
    scrollLeft = slider.scrollLeft;
});
slider.addEventListener("mouseleave", () => {
    isDown = false;
    slider.classList.remove("active");
});
slider.addEventListener("mouseup", (e) => {
    isDown = false;
    const elements = document.querySelectorAll("a");
    if(isDragged) {
        for(let i = 0; i < elements.length; i++) {
            elements[i].addEventListener("click", preventClick);
        }
    } else {
        for(let i = 0; i < elements.length; i++) {
            elements[i].removeEventListener("click", preventClick);
        }
    }
    slider.classList.remove("active");
    isDragged = false;
});
slider.addEventListener("mousemove", e => {
    if(!isDown) return;
    isDragged = true;
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = (x - startX) * 2;
    slider.scrollLeft = scrollLeft - walk;
    console.log(walk);
});
}

var widthc = $(".catalog-cover").width();
$('.left-button').hide();
$('.left-button').click(function() {
    $('.right-button').show();
    $(".sliderWrapper1").animate({
        scrollLeft: "-="+widthc+"px"
    }, "normal", function() {
        if($('.sliderWrapper1').scrollLeft() <= 0) {
            $('.left-button').hide();
        }
    });
});
$('.right-button').click(function() {
    $('.left-button').show();
    $(".sliderWrapper1").animate({
        scrollLeft: "+="+widthc+"px"
    }, "normal", function() {
        if($('.sliderWrapper1')[0].scrollWidth - $('.sliderWrapper1').scrollLeft() == $('.sliderWrapper1').width()) {
            $(".right-button").hide();
        }
    });
});

标签： javascripthtmlsliderscrollbar