基于水平滚动隐藏和显示导航箭头 position 纯 javascript

Question

I am using horizontal scroll with left and right navigation button. While the scroll is in initial state the left arrow shouldn't be visible. On clikicng right arrow when it moves half the way then the left arrow should appear.

Similary when its reaches the right end the right arrow should diaappear.

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

How to detect the scroll and hide left & right arrows.

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

From what I could understand from the description you gave, this should work.