基于水平滚动位置纯javascript隐藏和显示导航箭头答案

【问题标题】：Hiding and Showing navigation arrows based on horizontal scroll position pure javascript基于水平滚动位置纯javascript隐藏和显示导航箭头
【发布时间】：2023-03-29 13:25:01
【问题描述】：

我正在使用带有左右导航按钮的水平滚动。当滚动处于初始状态时，左箭头不应该是可见的。当右箭头移动到一半时点击右箭头，左箭头应该会出现。

类似地，当它到达右端时，右箭头应该会出现。

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' });

}

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

【问题讨论】：

你能创建一个工作的sn-p吗？

标签： javascript css horizontal-scrolling

【解决方案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
         }
        });

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

【讨论】：