制作一个水平滚动按钮 div

Question

我有一个网站，其中有一个 div，其中包含图像，设置为 overflow:auto; white-space: nowrap; 因此您可以在 div 中水平滚动以查看其中的所有图像。

我可以制作两个按钮（左右）来水平滚动 div 吗？我问这个是因为当我有触摸屏或触控板时，我可以在 div 中滚动，但是当我在桌面上只有鼠标时，没有滚动 div 的选项。我听说你想只使用滚动条，但我已经隐藏了使用 CSS 的滚动条，因为它们在不同的计算机和浏览器上看起来不同，而且非常痛苦，而且对我来说看起来不够干净。 Here is my site（我做了一个页面，我再次解释了这个问题）。

我看过轮播插件，但想知道是否有 CSS 的方法。

.blackbackgroundscroll {
   background: #fff;
   padding: 8px 8px 8px 8px;
   margin: 12px 0px 5px 0px;
   box-shadow: 0 0px 0px 0 rgba(0,0,0,0.0);
   border: 1px solid #dadce0;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
   border-bottom-left-radius: 2px;
   overflow: auto;
   white-space: nowrap;
   -webkit-overflow-scrolling: touch;
 }

<div class="blackbackgroundscroll">
  <a href="https://www.npostart.nl/pauw/VARA_101377247" target="_blank" rel="noopener noreferrer">
  <img src="https://tuberadar.nl/wp-content/uploads/PAUW-thumbnail.png" alt="" width="210" height="119" class="alignleft size-full wp-image-16930" />
  </a>
</div>

我不知道从哪里开始，因为我也觉得这需要一些 JavaScript 而且我没有使用 JS 的经验。

Answer 1

You can scroll using Element.scrollLeft property to which you can provide the amount to scroll as an integer value.

这是一个基本示例： JavaScript + CSS + HTML

    const buttonRight = document.getElementById('slideRight');
    const buttonLeft = document.getElementById('slideLeft');

    buttonRight.onclick = function () {
      document.getElementById('container').scrollLeft += 20;
    };
    buttonLeft.onclick = function () {
      document.getElementById('container').scrollLeft -= 20;
    };

    #container {
      width: 145px;
      height: 100px;
      border: 1px solid #ccc;
      overflow-x: scroll;
    }

    #content {
      width: 250px;
      background-color: #ccc;
    }

    <div id="container">
      <div id="content">Click the buttons to slide horizontally!</div>
    </div>
    <button id="slideLeft" type="button">Slide left</button>
    <button id="slideRight" type="button">Slide right</button>

制作一个水平滚动按钮 div

make a button to scroll horizontally in div

html

css

overflow

horizontal-scrolling