无法获得滚动按钮 div`s 溢出与 js

Question

我一直在努力让按钮正常工作，在来这里提问之前我已经尝试了所有我能想到的方法。我想要做的是让 div 左边和右边的按钮溢出，滚动它。我对网络前端比较陌生，刚刚学习 CSS & HTML。我也真的需要它保持 css 网格格式，因为它只是我正在尝试做的网站的一个块。另外，如果可能，请以 codepen's/snippets 的形式给出答案。我已经尝试分配插入和粘贴 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>

p.s。请给一些时间来加载图像。

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 总是 returns HTMLCollection，您可以将其视为数组。

Answer 2

我在你的代码中看到了一些语法错误..休息它工作正常

函数 scrolll() {

var elmnt = document.getElementsByClassName("scnd")[0];

elmnt.scrollLeft += 50; }

我试过codepen。这是 link https://codepen.io/shivani137/pen/GdzaxJ?editors=1010

无法获得滚动按钮 div`s 溢出与 js

Cant get a button to scroll div`s overflow with js

javascript

css

scroll

overflow

scrollbar