jQuery - 如果水平滚动的 div 位于滚动的最左边和最右边，则触发事件

Question

我有一个水平滚动的 div:

<div id = "scrollable-div">
    <div class = "div-inside"></div>
    <div class = "div-inside"></div>
    <div class = "div-inside"></div>
    <div class = "div-inside"></div>
</div>

我想在用户滚动到div的最右侧时触发一个事件，然后在用户滚动回div的最左侧时触发另一个事件。我有以下代码，当我到达最右边时会触发一个事件:

jQuery(function ($) {
        $('#scrollable-div').on('scroll', function () {
            if ($(this).scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) {
                $('#end-treatment').show();

            }
        })
    }); 

但是当我回到左边时，我似乎无法让它工作。基本上，我想在滚动到最右边时显示一个 div，在滚动回最左边时显示另一个 div。这可能吗？谢谢..

Answer 1

是的，如果我没理解错的话。请参阅下面的代码片段，但基本思想是 if($(this).scrollLeft() === 0) { ... }

我还插入了隐藏消息的逻辑(请参阅我的评论)，以防万一您想要这样做，但如果这不是您想要的，您可以将其删除。

jQuery(function ($) {
  $('#div-1').on('scroll', function () {
    if($(this).scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) {
      $('#end-treatment').show();
    } else if($(this).scrollLeft() === 0) {
      $('#other-message').show();
      
    // Remove this part if you don't want your messages hidden again
    } else {
      $('#end-treatment').hide();
      $('#other-message').hide();
    }
  })
});

.scrollable-div {
  max-width: 200px;
  overflow-x: auto;
  white-space: nowrap;
  background: lightgray;
}

.div-inside {
  display: inline-block;
  width: 100px;
  height: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  background: gray;
}

.message {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="div-1" class="scrollable-div">
  <div class="div-inside"></div>
  <div class="div-inside"></div>
  <div class="div-inside"></div>
  <div class="div-inside"></div>
</div>

<div id="end-treatment" class="message">
  "End Treatment"
</div>

<div id="other-message" class="message">
  "Other Message"
</div>