时间戳

首页 > 解决方案 > 如何判断页面是否一直滚动到一边

jquery - 如何判断页面是否一直滚动到一边

问题描述

我有一个溢出视口的页面。用户可以滚动或滑动查看整个页面。我想根据用户滚动的距离将消息从“向右滑动”更改为“向左滑动”，但我遇到了麻烦。我怎么知道我什么时候横向滚动到最后？任何人都可以帮忙吗？

var totalWidth = $('.container').width();

$(window).scroll(function() {
  var documentScrollLeft = $(document).scrollLeft();
  
  //switch command to swipe left or right depending on what point the user has scrolled to
  if (documentScrollLeft >= width) {
    $('.swipe').html("<i class='fas fa-arrow-left'></i> SWIPE LEFT");
  } else {
    $('.swipe').html("SWIPE RIGHT <i class='fas fa-arrow-right'></i>");
  }
});
.container {
  display: flex;
  /*align-items: center;*/
  /*width: 100%;*/
  position: absolute;
  top: 0;
  left: 0;
  /*height:100vh;*/
  margin-top: 0px;
}

@media only screen and (max-width: 1024px) {
  .container {
    top: 32px;
  }
}

.panel {
  height: 100vh;
  /*width: 25%;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swipe mobile">SWIPE RIGHT <i class="fas fa-arrow-right"></i></div>
<div class='container'>
  <img name="panel1" src="img/panel1.jpg" border="0" id="" alt="" class="panel" />
  <img name="panel2" src="img/panel2.jpg" border="0" id="" alt="" class="panel" />
  <img name="panel3" src="img/panel3.jpg" border="0" id="" alt="" class="panel" />
  <img name="panel4" src="img/panel4.jpg" border="0" id="" alt="" class="panel" />
</div>

标签： jqueryscroll

解决方案

这是你的起点，只需要设置你的逻辑。

var lastScrollLeft = 0;
$(window).scroll(function() {
    var documentScrollLeft = $(document).scrollLeft();
    if (lastScrollLeft != documentScrollLeft) {
        console.log('horizontal scroll x');
        lastScrollLeft = documentScrollLeft;
    }
});

推荐阅读