查找水平可滚动div的结尾并删除scroll事件

Question

我有一个水平滚动的div里面有不同的元素。我有一个js函数，用于在带有mouse wheel的div中移动；当我到达div的末尾时，我需要删除该事件以继续向下滚动。

这是我的示例小提琴代码：

<div class="wrapper">
  <div class="container">
    <div class="element-1"></div>
    <div class="element-2"></div>
    <div class="element-3"></div>
    <div class="element-4"></div>
  </div>
</div>

<div class="element-5"></div>

.wrapper {
  width:100vw;
  overflow-x: scroll;
}

.container {
   height: 100vh;
   width: max-content;
   overflow-x: scroll;
   overflow-y: hidden;
}

.element-1,
.element-2,
.element-3,
.element-4{
  width: 300px;
  height: 90vh;
  border: 1px solid green;
  display: inline-block;
  float: left;
}

.element-5{
   width: 300px;
   height: 100px;
   background-color: red;
}

$('.wrapper').on("wheel", function(evt) {
        evt.preventDefault();
        $(this).scrollLeft( $(this).scrollLeft() + evt.originalEvent.deltaY);
    });

Answer 1

我希望这就是你要找的。

我只是在你的代码中添加了一个条件来检查容器是否到达了它的正确末端。

​

$('.wrapper').on("wheel", function(evt) {
  if($('.wrapper').width() + $('.wrapper').scrollLeft() < $('.container').width()) {
      evt.preventDefault();
      $(this).scrollLeft( $(this).scrollLeft() + evt.originalEvent.deltaY);
    }
});

.wrapper {
  width: 500px;
  overflow-x: scroll;
}

.container {
   height: 200px;
   width: max-content;
   overflow-x: scroll;
   overflow-y: hidden;
}

.element-1,
.element-2,
.element-3,
.element-4{
  width: 300px;
  height: 150px;
  border: 1px solid green;
  display: inline-block;
  float: left;
}

.element-5{
   width: 300px;
   height: 200px;
   background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="element-1"></div>
    <div class="element-2"></div>
    <div class="element-3"></div>
    <div class="element-4"></div>
  </div>
</div>

<div class="element-5"></div>

​