Question

在这种情况下，我试图找到一种“简单明了”的解决方案来工作：

在移动设备上

用户正在滚动图像（100vw或全屏），并停在该图像的顶部/底部附近（假设为100px），在这种情况下，我希望该图像自动滚动至其上/下边缘。

我有一个例子来说明我的观点：

var timeout = 600;
var timer;
$(window).scroll(function(event) {
  clearTimeout(timer);
  timer = setTimeout(function() {
    $(".section").each(function() {
      var scrollTop = $(window).scrollTop();
      var offset = $(this).offset().top;
      if (offset - scrollTop < 200 && offset - scrollTop > -200) {
        $('html,body').animate({
          scrollTop: $(this).offset().top
        }, '600');
        return;
      }
    });
  }, timeout);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section" id="section-1">
  Section 1
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div class="section" id="section-2">
  Section 2
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

在该示例中，解决方案遭受屏幕笔触/闪烁和其他可怕的问题）

。

理想情况下，我想要类似CSS Scroll Snap的行为，但是在这种情况下我无法应用。

是否可以使用简单的东西（例如jQuery .scrollTo .animate等），并且不会弄乱页面的其余部分？

Answer 1

对我来说，即使那样工作也很完美，但我想在其他计算机上可能会有所不同。也许尝试使用其他方法进行反跳，这样您就不会添加计时器并将其删除很多次了。

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};


var timeout = 600;
var timer;
$(window).scroll(debounce(250, function(event) {
  clearTimeout(timer);
  timer = setTimeout(function() {
    $(".section").each(function() {
      var scrollTop = $(window).scrollTop();
      var offset = $(this).offset().top;
      if (offset - scrollTop < 200 && offset - scrollTop > -200) {
        $('html,body').animate({
          scrollTop: $(this).offset().top
        }, '600');
        return;
      }
    });
  }, timeout);
})function debounce(func, wait, immediate) {
var timeout;
return function() {
    var context = this, args = arguments;
    var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
};

};）;

将滚动条添加到图像的顶部/底部边缘附近时，简单清晰的JS解决方案？

1 个答案: