如何实现点击按钮控制<li>列表左右滑动，隐藏显示部分元素

实现思路 #

• 外层使用Flex布局实现左右按钮和标签列表同一行垂直对齐
• 标签列表外层套溢出隐藏容器，内部标签设置横向不换行排列
• 通过修改标签列表的transform: translateX属性实现平滑滑动，添加过渡动画实现滑动效果
• 点击按钮时计算位移边界，避免滑动超出内容范围

完整代码 #

HTML #

<!-- 外层父容器控制整体布局 -->
<div class="slider-wrapper">
  <button id="left-button">向左滑动</button>
  <!-- 标签可视容器，控制溢出隐藏 -->
  <div class="tab-viewport">
    <ul class="tabs in">
      <li class="internal">印度</li>
      <li class="internal">马来西亚</li>
      <li class="internal">新加坡</li>
      <li class="internal">印度尼西亚</li>
      <li class="internal">格陵兰</li>
      <li class="internal">澳大利亚</li>
      <li class="internal">斯里兰卡</li>          
      <li class="internal">非洲</li>          
      <li class="internal">欧洲</li>
      <li class="internal">巴黎</li>
      <li class="internal">德国</li>
      <li class="internal">美国</li>
    </ul>
  </div>
  <button id="right-button">向右滑动</button>
</div>

CSS #

/* 清除默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.slider-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 800px; /* 可根据需求调整整体宽度 */
  margin: 20px auto;
}
button {
  padding: 8px 12px;
  cursor: pointer;
  flex-shrink: 0; /* 防止按钮被压缩 */
}
.tab-viewport {
  flex: 1;
  overflow: hidden; /* 隐藏超出可视区域的标签 */
}
.tabs.in {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  gap: 16px;
  transition: transform 0.3s ease; /* 滑动动画效果 */
}
.tabs.in li {
  padding: 8px 16px;
  white-space: nowrap; /* 禁止文字折行 */
  border: 1px solid #eee;
  border-radius: 4px;
  flex-shrink: 0;
}

JavaScript #

const leftBtn = document.getElementById('left-button')
const rightBtn = document.getElementById('right-button')
const tabs = document.querySelector('.tabs.in')
const viewport = document.querySelector('.tab-viewport')

let currentOffset = 0
const step = 200 // 每次点击滑动的距离，可自行调整

// 点击左按钮查看左侧内容
leftBtn.addEventListener('click', () => {
  currentOffset = Math.min(currentOffset + step, 0)
  tabs.style.transform = `translateX(${currentOffset}px)`
})

// 点击右按钮查看右侧内容
rightBtn.addEventListener('click', () => {
  const maxOffset = viewport.clientWidth - tabs.scrollWidth
  currentOffset = Math.max(currentOffset - step, maxOffset)
  tabs.style.transform = `translateX(${currentOffset}px)`
})

内容的提问来源于stack exchange，提问作者user16805426