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

// 获取水平滚动元素和导航箭头元素
var scrollContainer = document.getElementById('scroll-container');
var prevArrow = document.getElementById('prev-arrow');
var nextArrow = document.getElementById('next-arrow');

// 监听水平滚动元素的滚动事件
scrollContainer.addEventListener('scroll', function() {
  // 获取水平滚动元素的滚动位置
  var scrollLeft = scrollContainer.scrollLeft;

  // 根据滚动位置判断是否显示导航箭头
  if (scrollLeft > 0) {
    prevArrow.style.display = 'block';
  } else {
    prevArrow.style.display = 'none';
  }

  if (scrollLeft < scrollContainer.scrollWidth - scrollContainer.clientWidth) {
    nextArrow.style.display = 'block';
  } else {
    nextArrow.style.display = 'none';
  }
});