javascript - 一次滚动一个 div 的按钮

Question

我的页面上有很多事件，我有一个包含一些图像的 div(滚动条处于事件状态)，并且我有一个使用箭头的功能(滚动条被隐藏)。 我想要的是:我需要滑动按钮来处理每个事件，并且只移动您正在检查的事件。 我已经尝试了一些方法，但我无法让它工作

var next = document.getElementById('slide');
next.onclick = function() {
  var container = document.getElementById('scrollFunction');
  sideScroll(container, 'right', 25, 100, 10);
};

var back = document.getElementById('slideBack');
back.onclick = function() {
  var container = document.getElementById('scrollFunction');
  sideScroll(container, 'left', 25, 100, 10);
};

function sideScroll(element, direction, speed, distance, step) {
  scrollAmount = 0;
  var slideTimer = setInterval(function() {
    if (direction == 'left') {
      element.scrollLeft -= step;
    } else {
      element.scrollLeft += step;
    }
    scrollAmount += step;
    if (scrollAmount >= distance) {
      window.clearInterval(slideTimer);
    }
  }, speed);
}

.scoll-pane {
  width: 100%;
  height: auto;
  overflow: auto;
  outline: none;
  overflow-y: hidden;
  padding-bottom: 15px;
  -ms-overflow-style: scroll;
  scrollbar-width: none;
}

ul {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

img {
  width: 300px;
  height: 180px;
}

.scoll-pane::-webkit-scrollbar {
  display: none;
}

#slideBack {
  cursor: pointer;
  position: absolute;
  top: 105px;
  left: -15px;
}

#slide {
  cursor: pointer;
  position: absolute;
  top: 100px;
  right: -15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This HTML code will be repeated for every event -->
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="event-date mt-4">
        <h4>October 1 (Monday)</h4>
        <hr>
      </div>
    </div>
    <div class="col-12">
      <div class="scoll-pane mt-4" id="scrollFunction">
        <ul class="photos">
          <li>
            <img src="https://robohash.org/test">
          </li>
          <li>
            <img src="https://robohash.org/test">
          </li>
          <li>
            <img src="https://robohash.org/test">
          </li>
          <li>
            <img src="https://robohash.org/test">
          </li>
        </ul>
      </div>
      <i id="slideBack" class="fas fa-arrow-left"></i>
      <i id="slide" class="fas fa-arrow-right"></i>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="event-date mt-4">
        <h4>October 1 (Monday)</h4>
        <hr>
      </div>
    </div>
    <div class="col-12">
      <div class="scoll-pane mt-4" id="scrollFunction">
        <ul class="photos">
          <li>
            <img src="https://robohash.org/test">
          </li>
          <li>
            <img src="https://robohash.org/test">
          </li>
          <li>
            <img src="https://robohash.org/test">
          </li>
          <li>
            <img src="https://robohash.org/test">
          </li>
        </ul>
      </div>
      <i id="slideBack" class="fas fa-arrow-left"></i>
      <i id="slide" class="fas fa-arrow-right"></i>
    </div>
  </div>
</div>



<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Answer 1

问题是因为您复制了 id 属性，而它们必须是唯一的。要解决此问题，您需要在重复的 DOM 结构上使用通用类。然后在你的 JS 中你需要遍历这个 DOM 结构来找到与点击的下一个/上一个图标相关的可滚动元素。

请注意 .slide 和 .slideBack 元素上的循环，以便将事件监听器单独添加到所有这些元素。另请注意使用 parentElement.querySelector() 来查找相关的 .scroll-pane。

document.querySelectorAll('.slide').forEach(function(next) {
  next.addEventListener('click', function() {
    var container = this.parentElement.querySelector('.scoll-pane');
    sideScroll(container, 'right', 25, 100, 10);
  });
});

document.querySelectorAll('.slideBack').forEach(function(back) {
  back.addEventListener('click', function() {
    var container = this.parentElement.querySelector('.scoll-pane');
    sideScroll(container, 'left', 25, 100, 10);
  });
});

function sideScroll(element, direction, speed, distance, step) {
  scrollAmount = 0;
  var slideTimer = setInterval(function() {
    if (direction == 'left') {
      element.scrollLeft -= step;
    } else {
      element.scrollLeft += step;
    }
    scrollAmount += step;
    if (scrollAmount >= distance) {
      window.clearInterval(slideTimer);
    }
  }, speed);
}

.scoll-pane {
  width: 100%;
  height: auto;
  overflow: auto;
  outline: none;
  overflow-y: hidden;
  padding-bottom: 15px;
  -ms-overflow-style: scroll;
  scrollbar-width: none;
}

ul {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

img {
  width: 300px;
  height: 180px;
}

.scoll-pane::-webkit-scrollbar {
  display: none;
}

.slideBack {
  cursor: pointer;
  position: absolute;
  top: 105px;
  left: -15px;
}

.slide {
  cursor: pointer;
  position: absolute;
  top: 100px;
  right: -15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This HTML code will be repeated for every event -->
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="event-date mt-4">
        <h4>October 1 (Monday)</h4>
        <hr>
      </div>
    </div>
    <div class="col-12">
      <div class="scoll-pane mt-4">
        <ul class="photos">
          <li>
            <img src="https://robohash.org/test">
          </li>
          <li>
            <img src="https://robohash.org/test">
          </li>
          <li>
            <img src="https://robohash.org/test">
          </li>
          <li>
            <img src="https://robohash.org/test">
          </li>
        </ul>
      </div>
      <i class="slideBack fas fa-arrow-left"></i>
      <i class="slide fas fa-arrow-right"></i>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="event-date mt-4">
        <h4>October 1 (Monday)</h4>
        <hr>
      </div>
    </div>
    <div class="col-12">
      <div class="scoll-pane mt-4">
        <ul class="photos">
          <li>
            <img src="https://robohash.org/test">
          </li>
          <li>
            <img src="https://robohash.org/test">
          </li>
          <li>
            <img src="https://robohash.org/test">
          </li>
          <li>
            <img src="https://robohash.org/test">
          </li>
        </ul>
      </div>
      <i class="slideBack fas fa-arrow-left"></i>
      <i class="slide fas fa-arrow-right"></i>
    </div>
  </div>
</div>



<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">