Горизонтальное нажатие и перетаскивание с помощью JS

Question

Итак, я нашел этот код (https://codepen.io/sebastian-eriksson/pen/pooKQRa),, но когда я добавляю еще один div с классом "items", я не могу перетащить его для прокрутки элементов.

Я пытался использовать querySelectorAll, чтобы найтивсе селекторы называются «.items», но тогда ни один из них не будет работать.

Ниже приведен код:

const slider = document.querySelectorAll('.items');

const slider = document.querySelector('.items');

Код CSS:

.items {
  position: relative;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  transition: all 0.2s;
  transform: scale(1);
  will-change: transform;
  user-select: none;
  cursor: pointer;
}

.items.active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  transform: scale(1.03);
}

HTML-код:

  <section id="headSpacing">
    <section id="headSpacing">
      <h1>Populära Guider</h1>
      <div class="scroll">
        <div class="scroll-content">
          <div class="items">
          <span id="pop">
            <% @guides = Guide.all %>
            <% @guides.each do |g| %>
              <p id="<%= g.channel.channel %>">
                <span>
                  <%= link_to g do %>
                    <%= truncate(g.title, :length => 16) %>
                  <% end %>
                </span> 
                <span id="channel">
                  <%= g.channel.channel %>
                </span> 
                <br> 
                <span id="author">
                  <%= g.user.username %>
                </span>
              </p>
            <% end %>
          </span>
          </div>
        </div>
      </div>
      <span id="grad"></span>
    </section>
  </section>

  <section>
    <h1>Programmering Språk</h1>
    <div class="scroll" id="newRow">
      <div class="scroll-content container">
        <div class="items">
        <span id="pop">
          <% @channels = Channel.all %>
          <% @channels.each do |c| %>
            <p id="<%= c.channel %>">
              <span id="channel">
                <%= link_to c.channel, c %>
              </span>
            </p>
          <% end %>
        </span>
        </div>
      </div>
    </div>
  </section>

JS-код:

  const slider = document.querySelector('.items');
  let isDown = false;
  let startX;
  let scrollLeft;

  slider.addEventListener('mousedown', (e) => {
    isDown = true;
    slider.classList.add('active');
    startX = e.pageX - slider.offsetLeft;
    scrollLeft = slider.scrollLeft;
  });
  slider.addEventListener('mouseleave', () => {
    isDown = false;
    slider.classList.remove('active');
  });
  slider.addEventListener('mouseup', () => {
    isDown = false;
    slider.classList.remove('active');
  });
  slider.addEventListener('mousemove', (e) => {
    if(!isDown) return;
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = (x - startX) * 1; //scroll-fast
    slider.scrollLeft = scrollLeft - walk;
    console.log(walk);
  });

Так что, в основном, я хочу иметь возможность просматривать и пролистывать множество различных элементов Div. Пожалуйста, спросите, нужно ли мне уточнить.