在一页上运行多个水平滚动

Question

我找到了一个很好的例子来说明我需要在我的页面上滚动一个 div：-

Codepen - https://codepen.io/zheisey/pen/xxGbEOx

但是，我希望允许多个 div 能够使用此功能滚动。可以请教吗？

我通过添加 '.scrolling-wrapper2' 进行了尝试，但滚动不适用于我的第二个包装器。

const slider = document.querySelector('.scrolling-wrapper, .scrolling-wrapper2');

下面的完整代码-

  <div class="scrolling-wrapper">
  <div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div>
  </div>

  <div class="scrolling-wrapper scrolling-wrapper2">
  <div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div><div class="card"><h2>Plain Text</h2></div>
  </div>

<style>
.scrolling-wrapper {
  display: flex;
  flex-wrap: no-wrap;
  overflow-x: auto;
  cursor: grab;
}

.scrolling-wrapper.active {
  cursor: grabbing;
}

.scrolling-wrapper[data-dragging="true"] a {
  pointer-events: none;
}

.card {
  color: white;
  background-color: tomato;
  font-family: monospace;
  width: 200px;
  height: 200px;
  margin-right: 1rem;
  flex: 0 0 auto;
  /* Centering text only */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>

<script>
const slider = document.querySelector('.scrolling-wrapper, .scrolling-wrapper2');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  let rect = slider.getBoundingClientRect();
  isDown = true;
  slider.classList.add('active');
  // Get initial mouse position
  startX = e.pageX - rect.left;
  // Get initial scroll position in pixels from left
  scrollLeft = slider.scrollLeft;
  console.log(startX, scrollLeft);
});

slider.addEventListener('mouseleave', () => {
  isDown = false;
  slider.dataset.dragging = false;
  slider.classList.remove('active');
});

slider.addEventListener('mouseup', () => {
  isDown = false;
  slider.dataset.dragging = false;
  slider.classList.remove('active');
});

slider.addEventListener('mousemove', (e) => {
  if (!isDown) return;
  let rect = slider.getBoundingClientRect();
  e.preventDefault();
  slider.dataset.dragging = true;
  // Get new mouse position
  const x = e.pageX - rect.left;
  // Get distance mouse has moved (new mouse position minus initial mouse position)
  const walk = (x - startX);
  // Update scroll position of slider from left (amount mouse has moved minus initial scroll position)
  slider.scrollLeft = scrollLeft - walk;
  console.log(x, walk, slider.scrollLeft);
});
</script>

Answer 1

改变

  <div class="scrolling-wrapper2">

与

  <div class="scrolling-wrapper2 scrolling-wrapper">

实际上，您不需要为第二个<div> 创建新类，但如果您正在创建，您还没有为它提供相应的CSS。