Question

感谢您阅读我的问题。

我有一个网站，其中有一个带图片的div，设置为overflow：auto;空白：nowrap;因此，您可以在div中水平滚动以查看其中的所有图像。我的问题。我可以使用两个按钮（左右）来水平滚动此div吗？我问这个问题是因为当我有触摸屏或触控板时，我可以在div中滚动，但是当我只用鼠标在桌面上时，就没有滚动div的选项。我听说您以为只使用滚动条，但是我已经隐藏了那些使用css的控件，因为它们在不同的计算机和浏览器上看起来有所不同，这简直是一种痛苦，并且对我来说还不够干净。这是我的网站（我在其页面上再次解释了该问题。）https://tuberadar.nl/test1234/

感谢您阅读我的问题。

祝你有美好的一天！

我已经看过轮播插件了，但是想知道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;
     }

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

Answer 1

您可以使用 Element.scrollLeft 属性进行滚动，提供滚动值作为整数值。

这是一个基本示例： 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中水平滚动

1 个答案: