javascript - 无法获得一个按钮来使用 js 滚动 div 的溢出

Question

我一直在努力让按钮正常工作，而且我已经尝试了所有我能想到的方法，然后才在这里提问。我想要做的是让 div 左侧和右侧的按钮溢出，滚动它。我对网络前端比较陌生，只是在学习 CSS 和 HTML。我也真的需要它保留在 css 网格格式中，因为它只是我正在尝试做的网站的一个 block 。另外，如果可能，请以代码笔/代码段的形式给出答案。我已经尝试分配插入和粘贴 js 但没有结果。我知道这也可以通过插件或框架来实现。然而，为了学习，理解它为什么不起作用对我来说至关重要 :)

这是我的代码笔尝试:

function scrolll() {
  var elmnt = document.getElementByClassName("scnd");
  elmnt.scrollLeft += 50;
}

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: auto;
  grid-column-start: 2;
}

.thumb {
  width: 100%;
  text-align: center;
}

.thumb img {
  max-height: 10vw;
}

#left {
  grid-column-start: 1;
}

#right {
  grid-column-start: 3;
}

<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()"><</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">></button>

    </div>
  </div>
</div>

附注请给一些时间来加载图像。

Answer 1

这是请求的 fiddle : https://jsfiddle.net/52n8tsvb/

var scrolll = function() {
  var elmnt = document.getElementsByClassName("scnd")[0];
  elmnt.scrollLeft += 50;
}

问题是您拼错了 document.getElementsByClassName，并将输出视为 document.getElementByID，document.getElementsByClassName 总是返回一个 HTMLCollection，您可以将其视为一个数组。