所以我找到了这段代码（https://codepen.io/sebastian-eriksson/pen/pooKQRa），但是当我添加另一个带有“ items”类的div时，我无法拖动它来滚动浏览这些项目。

我尝试使用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。请询问是否需要详细说明。