无法用JavaScript实现按钮滚动带overflow的div问题排查

我帮你找出了代码里的几个关键问题，现在已经修复完成，同时完全保留了你需要的CSS Grid布局：

问题拆解 #

1. JavaScript方法名拼写错误：你用了document.getElementByClassName，正确的方法名是document.getElementsByClassName（注意复数Elements），而且这个方法返回的是元素集合，必须取第一个元素才能进行滚动操作。
2. 右侧按钮未绑定事件：你只给左侧按钮添加了点击事件，右侧按钮还没关联对应的滚动函数。
3. 滚动属性设置不明确：.scnd容器需要明确设置overflow-x: auto来启用横向滚动，确保内容超出容器宽度时出现滚动条。

修正后的完整代码 #

HTML #

<div class="content">
  <div class="wrapper">
    <div class="box">
      <div class="frst">
        <img src="https://picsum.photos/800/500/?random">
      </div>
      <button id="left" onclick="scrolll()">&lt;&lt;</button>
      <div class="scnd">
        <div class="thumb">
          <a href="#"><img src="https://picsum.photos/175/100/?random"></a>
        </div>
        <div class="thumb">
          <a href="#"><img src="https://picsum.photos/175/100/?random"></a>
        </div>
        <div class="thumb">
          <a href="#"><img src="https://picsum.photos/175/100/?random"></a>
        </div>
        <div class="thumb">
          <a href="#"><img src="https://picsum.photos/175/100/?random"></a>
        </div>
        <div class="thumb">
          <a href="#"><img src="https://picsum.photos/175/100/?random"></a>
        </div>
        <div class="thumb">
          <a href="#"><img src="https://picsum.photos/175/100/?random"></a>
        </div>
        <div class="thumb">
          <a href="#"><img src="https://picsum.photos/175/100/?random"></a>
        </div>
        <div class="thumb">
          <a href="#"><img src="https://picsum.photos/175/100/?random"></a>
        </div>
      </div>
      <button id="right" onclick="scrollr()">&gt;&gt;</button>
    </div>
  </div>
</div>

CSS #

body {
  min-width: 200px; /* solution for img overflow */
  border: 3px solid black;
}
.wrapper {
  border: 3px solid red;
  display: grid;
  margin: 5%;
}
.box {
  grid-row-gap: 0.3em;
  display: grid;
  justify-self: center;
  grid-template-rows: 50% 25%;
  grid-template-columns: 1fr 7fr 1fr;
}
.box div {
  border: 1px solid blue;
  max-width: 800px;
}
.box .frst {
  text-align: center;
  display: block;
  grid-column-start: 2;
}
.box .frst img {
  display: block;
  margin: auto;
  max-width: 100%;
}
.scnd {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 2px;
  overflow-x: auto; /* 明确启用横向滚动 */
  grid-column-start: 2;
  /* 可选：隐藏默认滚动条，只保留按钮控制 */
  /* scrollbar-width: none; */
  /* -ms-overflow-style: none; */
}
/* .scnd::-webkit-scrollbar { display: none; } */
.thumb {
  width: 100%;
  text-align: center;
}
.thumb img {
  max-height: 10vw;
}
#left {
  grid-column-start: 1;
  align-self: center; /* 让按钮垂直居中 */
}
#right {
  grid-column-start: 3;
  align-self: center; /* 让按钮垂直居中 */
}

JavaScript #

function scrolll() {
  // 修正方法名，并获取第一个目标元素
  var elmnt = document.getElementsByClassName("scnd")[0];
  elmnt.scrollLeft -= 50; // 向左滚动，数值为负
}

function scrollr() {
  var elmnt = document.getElementsByClassName("scnd")[0];
  elmnt.scrollLeft += 50; // 向右滚动，数值为正
}

额外优化说明 #

• 给按钮添加了align-self: center，让它们和滚动容器在垂直方向上居中对齐，视觉效果更协调。
• 如果你想隐藏默认的滚动条，只保留按钮作为唯一控制方式，可以取消CSS里相关注释的代码。
• 现在点击左右按钮，.scnd容器会分别向左/向右滚动50px，完全满足你的需求，同时所有CSS Grid布局结构都被保留下来。

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