div横向滚动按钮控制异常求助：逐项滚动功能失效

嘿，我来帮你搞定这个横向滚动的麻烦！你遇到的核心问题是滚动位置计算逻辑错误，加上没有做边界控制，导致currentIdx递增后滚动失效。咱们一步步来修复：

先修正HTML的小问题 #

你的两个按钮都用了id="arrows"，但HTML里id是唯一标识，重复会导致选择器冲突，建议改成：

<button class="next" id="next-arrow">&#8250;</button>
<!-- ... 产品图片 ... -->
<button class="prev" id="prev-arrow">&#8249;</button>

核心问题分析 #

你之前用$(".product").eq(currentIdx).offset().left获取滚动位置，这个值是元素相对于整个文档的左偏移，而.product-slide的scrollLeft是相对于容器自身的偏移量。当容器已经滚动过一段距离后，这个计算值会包含之前的滚动距离，导致滚动位置完全错误，自然看起来currentIdx递增无效。

另外，currentIdx一直递增没有边界判断，当超过产品总数后，eq(currentIdx)找不到元素，逻辑直接失效。

解决方案：逐项滚动 #

先准备基础变量，再写滚动逻辑：

var currentIdx = 0;
var $slideContainer = $('.product-slide');
var $products = $('.product');
var productWidth = $products.first().outerWidth(true); // 包含margin/padding的完整宽度
var totalProducts = $products.length;
jQuery.easing.def = "easeInOutQuad";

// 下一项滚动
$(".next").click(function (){
  // 到达最后一项时停止滚动
  if(currentIdx >= totalProducts - 1) return;
  currentIdx++;
  // 基于产品宽度计算容器内的滚动位置
  var scrollPos = currentIdx * productWidth;
  $slideContainer.animate({
    scrollLeft: scrollPos
  }, 600);
});

// 上一项滚动
$(".prev").click(function (){
  // 到达第一项时停止滚动
  if(currentIdx <= 0) return;
  currentIdx--;
  var scrollPos = currentIdx * productWidth;
  $slideContainer.animate({
    scrollLeft: scrollPos
  }, 600);
});

扩展：每次滚动5个元素 #

如果要实现每次滚动显示下5个产品，只需要调整滚动步长和边界判断：

var scrollStep = 5; // 每次滚动5个
var currentIdx = 0;
var $slideContainer = $('.product-slide');
var $products = $('.product');
var productWidth = $products.first().outerWidth(true);
var totalProducts = $products.length;
jQuery.easing.def = "easeInOutQuad";

// 下一组滚动
$(".next").click(function (){
  // 计算最大可滚动的索引，避免超出产品总数
  var maxIdx = Math.max(0, totalProducts - scrollStep);
  currentIdx = Math.min(currentIdx + scrollStep, maxIdx);
  var scrollPos = currentIdx * productWidth;
  $slideContainer.animate({
    scrollLeft: scrollPos
  }, 600);
});

// 上一组滚动
$(".prev").click(function (){
  currentIdx = Math.max(currentIdx - scrollStep, 0);
  var scrollPos = currentIdx * productWidth;
  $slideContainer.animate({
    scrollLeft: scrollPos
  }, 600);
});

必要的CSS设置 #

别忘了给容器和产品加上基础样式，确保横向滚动正常工作：

.product-slide {
  display: flex;
  overflow-x: auto;
  gap: 15px; /* 产品之间的间距，根据需求调整 */
  padding: 10px 0;
}
.product {
  flex-shrink: 0; /* 禁止产品被压缩变形 */
  width: 200px; /* 设置产品固定宽度，按需调整 */
  height: auto;
}

这样修改后，不管是逐项滚动还是批量滚动，currentIdx的逻辑都会正常工作，滚动位置也会准确对应到目标产品啦！

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