JavaScript横向卡片轮播功能运行失效问题求助

已定位的核心问题 #

• 变量拼写错误：边界判断逻辑中使用的maxscroll未遵循驼峰命名规则，和已定义的maxScroll不一致，会直接触发JS运行错误导致功能中断
• 最大滚动距离计算错误：一方面错误使用offsetWidth获取卡片容器宽度（被父级限制时该值仅为可视宽度，不是内容总宽度），另一方面错误将卡片容器宽度和可视滚动区宽度相加后取负作为最大滚动边界，会导致滚动范围远超实际内容长度，出现大面积空白区域
• 缺少必要CSS定位属性：卡片容器通过left属性实现偏移，但未设置定位属性，导致left样式完全不生效，滚动无视觉变化
• 尺寸计算时机错误：JS在DOM未完成渲染时就获取元素宽度，拿到的尺寸值不准确，同时窗口大小变化时不会重新计算边界，会出现分辨率适配问题
• 滚动过渡缺失：直接修改left值没有过渡动画，切换效果生硬

具体修复代码 #

1. CSS补充修正 #

替换原有对应CSS片段，补充必要属性：

.horizontal-scroll{
    position: relative; /* 新增：作为按钮定位父级，避免按钮位置偏移 */
    overflow: hidden;
}
.card-container{
    position: relative; /* 新增：让left偏移属性生效 */
    transition: left 0.3s ease; /* 新增：添加平滑滚动动画 */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-basis: 30%;
    width:calc(100% - 100px);
    margin-left: 50px;
    overflow-x: hidden;
    gap: 10px;
}
.card-container .card{
    min-width: 280px;
    flex: 1;
    height: 200px;
    width: 100%;
    border: 1px solid #ccc;
    background: #fff;
    background: #00F260;
    background: -webkit-linear-gradient(to bottom, #0575E6, #00F260);
    background: linear-gradient(to bottom, #0575E6, #00F260);
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:2px 2px 6px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow:2px 2px 6px 0px rgba(0, 0, 0, 0.1);
    text-align:center;
}
.card-container .card img{
    flex-wrap: wrap;
    pointer-events: none;       
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    float: none;
    display:block;
    object-fit: fill;
    height: 180px;
}
.horizontal-scroll .btn-scroll{
    background: 0;
    border: 0;
    padding: 0 10px;
    z-index: 10;
    cursor: pointer;
    font-size: 40px;
    color: #007bff;
    transition:  all .2s linear;
}
.horizontal-scroll .btn-scroll:hover{
    color: #ffffff;
    background-color: #007bff;
    border-radius: 10px;
}
.horizontal-scroll .btn-scroll:focus{
    outline: none;
    background-color:#007bff;
    color: rgba(255, 255, 255, 1.0);
    border-radius: 5px;
}
.horizontal-scroll #btn-scroll-left{
    position: absolute;
    left: 0;
    top: calc(200px/2);
}
.horizontal-scroll #btn-scroll-right{
    position: absolute;
    right: 0;
    top: calc(200px/2);
}

2. JS逻辑全量修复 #

替换原有JS代码为以下版本：

let currentScrollPosition = 0;
let scrollAmount = 320;
let sCont, hScroll, maxScroll;

// 初始化轮播尺寸参数
function initCarousel() {
  sCont = document.querySelector(".card-container");
  hScroll = document.querySelector(".horizontal-scroll");
  // 修正最大滚动距离：总内容宽度 - 可视区域宽度，取负为左移最大边界
  maxScroll = -(sCont.scrollWidth - hScroll.offsetWidth);
  currentScrollPosition = 0;
  sCont.style.left = currentScrollPosition + "px";
}

// 水平滚动逻辑
function scrollHorizontally(val){
  currentScrollPosition += (val * scrollAmount);
  // 左边界限制：防止右移过头露出空白
  if (currentScrollPosition > 0) {
    currentScrollPosition = 0
  }
  // 修正变量名拼写，右边界限制：防止左移过头露出空白
  if (currentScrollPosition < maxScroll) {
    currentScrollPosition = maxScroll;
  }
  sCont.style.left = currentScrollPosition + "px";
}

// DOM加载完成后初始化
window.addEventListener('DOMContentLoaded', initCarousel);
// 窗口尺寸变化时重新计算边界，适配不同分辨率
window.addEventListener('resize', initCarousel);

HTML部分不需要修改，替换完CSS和JS后轮播即可正常运行：左右按钮点击可平滑切换卡片，滚动到首尾位置会自动停止，不会出现空白区域，窗口大小变化时会自动适配滚动边界。

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