Question

我正在使用带有左右导航按钮的水平滚动。当滚动处于初始状态时，左箭头不应可见。在clikicng右箭头上移动一半时，则应显示左箭头。

Similary到达右端时，右箭头应会消失。

function move_right()
{
    var element = document.getElementById('scrollmenu');
    // x = element.clientWidth;
    x="50";
     element.scrollBy({ top: 0, left: x, behavior: 'smooth' });
}

function move_left()
{

    var element = document.getElementById('scrollmenu');
    // x = element.clientWidth;
    x="50";
     element.scrollBy({ top: 0, left: -x, behavior: 'smooth' });

}

如何检测滚动并隐藏左右箭头。

Answer 1

document.getElementById('scrollmenu').addEventListener("scroll", function (e) {
        horizontal = e.currentTarget.scrollLeft;
        scrollWidth = e.currentTarger.scrollWidth;
        if(horizontal < (scrollWidth/2)) {
           // add `display: none` to left button
           // add `display: inline-block` to right button
         } else {
          // add `display: inline-block` to left
          // add `display: none` to right button
         }
        });

从您的描述中我可以理解，这应该可行。

隐藏和显示基于水平滚动位置的导航箭头纯JavaScript

1 个答案: