javascript - 在引导程序 5 中单击 Prev/Next 时水平滚动列

Question

我创建了 2 个左右滚动 DIV 的按钮。但是，它滚动一个固定的宽度。我希望它在单击 Prev/Next 时滚动 Bootstrap 5 的每一列。

或者更简单地说，我希望它根据点击向左或向右滚动一列，而不是像当前那样每列滚动 100 像素。请帮忙。

演示 JSFiddle：https ://jsfiddle.net/hsmx2f5z/

HTML

<div class="nav-scroller">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="row nav" id="boxSlider">
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 1</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 2</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 3</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 4</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 5</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 6</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<input id="btnLeft" type="Button" value="Prev"/>
<input id="btnRight" type="Button" value="Next" />

CSS：

.nav-scroller {
  position: relative;
  z-index: 2;
  overflow-y: hidden;
}
.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
  padding-top: 50px;
  padding-bottom: 50px;
  font-size: 14px;
  color: #6c757d;
  min-width: 100px;
}

.nav-underline .nav-link:hover {
  color: #007bff;
}
.card-body p {
  color: #393939;
  white-space: pre-wrap;
}
.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}
.nav-scroller__eighty {
  width: 80%;
  max-width: 80%;
}

JS：

const boxSlider = document.getElementById('boxSlider');

document.getElementById("btnLeft").onclick = () => {
  boxSlider.scroll({
         left: boxSlider.scrollLeft + 200,
         behavior: 'smooth'
  });
}
     
document.getElementById("btnRight").onclick = () => {
  boxSlider.scroll({
         left: boxSlider.scrollLeft - 200,
         behavior: 'smooth'
  });
}

标签： javascriptjquerycssbootstrap-4bootstrap-5

Answer 1

您最好的选择可能是根据列元素的宽度滚动，如下所示：

  boxSlider.scroll({
    left: boxSlider.scrollLeft + widthOfColumn,
    behavior: 'smooth'
  });

您可以像这样获得列的宽度：

// Assuming all columns are the same width, get the width of the first column
boxSlider.querySelector(".nav-scroller__eighty").offsetWidth

你的代码应该是这样的

const boxSlider = document.getElementById('boxSlider');

document.getElementById("btnLeft").onclick = () => {
  boxSlider.scroll({
    left: boxSlider.scrollLeft + boxSlider.querySelector(".nav-scroller__eighty").offsetWidth,
    behavior: 'smooth'
  });
}
     
document.getElementById("btnRight").onclick = () => {
  boxSlider.scroll({
    left: boxSlider.scrollLeft - boxSlider.querySelector(".nav-scroller__eighty").offsetWidth,
    behavior: 'smooth'
  });
}