文本滑块的完整项显示与步进滚动功能实现需求

问题分析 #

你实现的文本滑块存在两个问题：

• 初始加载时会显示被截断的部分菜单项，需要限制仅展示300px范围内的完整项
• 滚动时无法精准移动两个完整可见项，且无法保证最终状态首尾项对齐滑块边缘

解决方案代码 #

修改后的JavaScript #

var currentPosition = 0;
var menuItems = [...document.getElementById('menu').children];
var wrapperWidth = document.querySelector('.menu-wrapper').offsetWidth;
// 预计算每个菜单项的总宽度（自身宽度+右侧margin）
var itemTotalWidths = menuItems.map(item => item.offsetWidth + 20);
// 预计算累计宽度数组，用于快速判断可见范围
var cumulativeWidths = [0];
itemTotalWidths.forEach((width, index) => {
  cumulativeWidths.push(cumulativeWidths[index] + width);
});

// 初始化：确保仅显示完整项
function initMenu() {
  // 找到最大的累计宽度不超过wrapperWidth的索引
  let lastVisibleIndex = 0;
  while (lastVisibleIndex < cumulativeWidths.length - 1 && cumulativeWidths[lastVisibleIndex + 1] <= wrapperWidth) {
    lastVisibleIndex++;
  }
  // 如果所有项加起来都不超过wrapper宽度，无需调整
  if (cumulativeWidths[cumulativeWidths.length - 1] <= wrapperWidth) return;
  menu.style.transform = `translateX(${currentPosition}px)`;
}

// 计算一次滚动两个完整项的步长
function getTwoItemsStep(currentStartIndex) {
  let step = 0;
  for (let i = currentStartIndex; i < currentStartIndex + 2 && i < itemTotalWidths.length; i++) {
    step += itemTotalWidths[i];
  }
  return step;
}

// 获取当前可见的起始项索引
function getCurrentStartIndex() {
  let scrolledWidth = Math.abs(currentPosition);
  for (let i = 0; i < cumulativeWidths.length; i++) {
    if (cumulativeWidths[i] > scrolledWidth) {
      return i - 1;
    }
  }
  return cumulativeWidths.length - 2; // 最后一项
}

function moveMenu(direction) {
  var menu = document.getElementById('menu');
  var totalMenuWidth = cumulativeWidths[cumulativeWidths.length - 1];
  var maxScroll = totalMenuWidth - wrapperWidth;
  
  if (direction === 'next') {
    let currentStart = getCurrentStartIndex();
    let step = getTwoItemsStep(currentStart);
    let newPosition = currentPosition - step;
    // 确保最后一项对齐滑块末端
    currentPosition = Math.max(newPosition, -maxScroll);
  } else if (direction === 'prev') {
    let currentStart = getCurrentStartIndex();
    let step = getTwoItemsStep(Math.max(currentStart - 2, 0));
    let newPosition = currentPosition + step;
    // 确保第一项对齐滑块起始端
    currentPosition = Math.min(newPosition, 0);
  }
  menu.style.transform = `translateX(${currentPosition}px)`;
}

document.getElementById('prevButton').addEventListener('click', function() {
  moveMenu('prev');
});
document.getElementById('nextButton').addEventListener('click', function() {
  moveMenu('next');
});

// 页面加载完成后初始化
window.addEventListener('load', initMenu);

CSS（无需修改） #

.menu-wrapper {
  width: 300px;
  overflow: hidden;
}
.menu {
  display: flex;
  white-space: nowrap;
  transition: transform 0.5s ease;
}
.menu-item {
  margin-right: 20px;
  flex-shrink: 0;
}

HTML（无需修改） #

<div class="menu-wrapper">
  <button id="prevButton">Prev</button>
  <div id="menu" class="menu">
    <span class="menu-item">Some longer text</span>
    <span class="menu-item">Text</span>
    <span class="menu-item">Some text</span>
    <span class="menu-item">Some text</span>
    <span class="menu-item">Longer text</span>
    <span class="menu-item">Some longer text</span>
    <span class="menu-item">Text</span>
    <span class="menu-item">Some text</span>
  </div>
  <button id="nextButton">Next</button>
</div>

关键修改说明 #

• 初始显示完整项：预计算每个菜单项的总宽度和累计宽度，初始化时筛选出300px范围内能容纳的所有完整项，避免截断显示
• 滚动逻辑优化：通过计算当前可见起始项的索引，每次滚动两个完整项的总宽度；同时添加边界判断，确保向前滚动时第一项对齐滑块起始端，向后滚动时最后一项对齐滑块末端

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