сделать кнопку для горизонтальной прокрутки в div

Question

Спасибо, что прочитали мой вопрос.

У меня есть веб-сайт, на котором у меня есть div с изображениями, настроенный на переполнение: 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>