如何在水平平面列表中显示箭头以指示存在不可见的滚动视图内容

在水平平面列表中显示箭头以指示存在不可见的滚动视图内容的实现方式可以通过以下步骤完成：

使用一个容器元素来包裹列表，设置其样式为固定宽度并设置overflow-x: scroll，使其具有水平滚动功能。
在容器元素内部创建一个列表元素，并设置其宽度为超出容器宽度的总宽度，以容纳所有内容。
根据列表中的内容数量，确定是否需要显示箭头来指示是否存在不可见的滚动视图内容。可以使用JavaScript根据容器元素的宽度和列表元素的宽度进行比较。
如果存在不可见的滚动视图内容，可以添加左右箭头图标，并使用CSS样式将其定位在容器元素的两侧。
添加事件监听器，使箭头图标能够响应点击事件。当点击箭头图标时，通过JavaScript修改列表元素的scrollLeft属性，实现滚动效果。

下面是一个示例代码：

HTML:

<div class="container">
  <ul class="list">
    <!-- 列表内容 -->
  </ul>
  <div class="arrow left"></div>
  <div class="arrow right"></div>
</div>

CSS:

.container {
  width: 300px;
  overflow-x: scroll;
  position: relative;
}

.list {
  width: 500px; /* 超出容器宽度的总宽度 */
}

.arrow {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-image: url(arrow.png); /* 箭头图标 */
  background-size: cover;
  cursor: pointer;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

JavaScript:

// 判断是否存在不可见的滚动视图内容
function checkVisibility() {
  var container = document.querySelector('.container');
  var list = document.querySelector('.list');
  
  if (list.offsetWidth > container.offsetWidth) {
    // 显示箭头
    document.querySelector('.arrow.left').style.display = 'block';
    document.querySelector('.arrow.right').style.display = 'block';
  } else {
    // 隐藏箭头
    document.querySelector('.arrow.left').style.display = 'none';
    document.querySelector('.arrow.right').style.display = 'none';
  }
}

// 点击左箭头，向左滚动
document.querySelector('.arrow.left').addEventListener('click', function() {
  var container = document.querySelector('.container');
  container.scrollLeft -= container.offsetWidth;
});

// 点击右箭头，向右滚动
document.querySelector('.arrow.right').addEventListener('click', function() {
  var container = document.querySelector('.container');
  container.scrollLeft += container.offsetWidth;
});

// 页面加载完成后检查滚动视图内容的可见性
window.addEventListener('load', function() {
  checkVisibility();
});

// 窗口大小改变时重新检查滚动视图内容的可见性
window.addEventListener('resize', function() {
  checkVisibility();
});

这样，当列表的内容超出容器的宽度时，就会显示左右箭头来指示存在不可见的滚动视图内容。用户可以通过点击箭头进行滚动操作，以便查看所有内容。请注意，这只是一个示例实现方式，实际项目中可能需要根据具体需求进行修改和调整。