网页指定div滚动到1400px位置功能失效，如何排查解决？

核心问题点 #

• CSS逻辑错误：可滚动容器本身被设置了1000000000px的超大宽度，容器自身不存在超出视口的内容，无法触发横向滚动。正确逻辑是：滚动容器设置为你需要的可视区域宽度，容器内部的内容总宽度大于容器宽度时，才会产生滚动空间。
• 事件未绑定：已定义的slideRight函数没有和右滑按钮绑定点击触发规则，点击按钮不会执行滚动逻辑。
• HTML语法错误：左滑按钮的标签缺少闭合尖括号，属于语法错误。

修复后代码 #

CSS #

/* 滚动容器设置可视宽度，可根据需求调整数值 */
.conatiner {
  border: 1px solid black;
  width: 1000px;
  height: 500px;
  overflow-x: scroll;
  position: relative; /* 确保内部绝对定位的箭头相对于容器定位 */
}
/* 新增内部内容容器，用来撑出滚动空间 */
.inner-content {
  width: 1000000000px;
  height: 100%;
}

HTML #

<div class="conatiner" id="scroller">
  <div class="inner-content">
    <i style=" position:absolute; right: 50px; margin-top: 100px;" class="fas fa-arrow-right"></i>
    <!-- 修复左按钮语法错误 -->
    <button id="left-button">swipe left</button>
    <!-- 绑定右按钮点击事件触发滚动逻辑 -->
    <button id="right-button" onclick="slideRight()"> swipe right </button>
  </div>
</div>

JS #

function slideRight() {
  var serviceCatalogue = document.getElementById('scroller');
  serviceCatalogue.scrollLeft = 1400;
}

如果需要平滑滚动效果，可以替换滚动逻辑为：

function slideRight() {
  var serviceCatalogue = document.getElementById('scroller');
  serviceCatalogue.scrollTo({
    left: 1400,
    behavior: 'smooth'
  })
}

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