Javascript 在图像接近上/下边缘时添加滚动，简单明了的JS解决方案？

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

移动电话

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

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

var超时=600；
无功定时器；
$（窗口）。滚动（功能（事件）{
清除超时（计时器）；
计时器=设置超时（函数（）{
$（“.section”）。每个（函数（）{
var scrollTop=$（窗口）.scrollTop（）；
var offset=$（this）.offset（）.top；
如果（偏移量-scrollTop<200和偏移量-scrollTop>-200）{
$（'html，body'）。设置动画({
scrollTop:$（this）.offset（）.top
}, '600');
返回；
}
});
}，超时）；
});

第一节































第二节































对我来说，它甚至可以像那样完美地工作，但我想在其他计算机上可能会有所不同。
也许可以尝试另一种方法，消除抖动，这样你就不会添加计时器并多次删除它

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);
};

函数去盎司（func，wait，immediate）{
var超时；
返回函数（）{
var context=this，args=arguments；
var later=function（）{
超时=空；
如果（！immediate）函数应用（上下文，参数）；
};
var callNow=立即&&！超时；
clearTimeout（超时）；
超时=设置超时（稍后，等待）；
if（callNow）funct.apply（上下文，参数）；
};
};
var超时=600；
无功定时器；
$（窗口）。滚动（去盎司（250），函数（事件）{
清除超时（计时器）；
计时器=设置超时（函数（）{
$（“.section”）。每个（函数（）{
var scrollTop=$（窗口）.scrollTop（）；
var offset=$（this）.offset（）.top；
如果（偏移量-scrollTop<200和偏移量-scrollTop>-200）{
$（'html，body'）。设置动画({
scrollTop:$（this）.offset（）.top
}, '600');
返回；
}
});
}，超时）；
})函数解盎司（函数、等待、立即）{
var超时；
返回函数（）{
var context=this，args=arguments；
var later=function（）{
超时=空；
如果（！immediate）函数应用（上下文，参数）；
};
var callNow=立即&&！超时；
clearTimeout（超时）；
超时=设置超时（稍后，等待）；
if（callNow）funct.apply（上下文，参数）；
};

});
 我不确定你说的“抚摸/闪烁和其他可怕的东西”。。。。我看不到类似的东西。你的代码运行得很好。这不是我的代码，只是一个示例，它运行得很好，但问题是-这在每个浏览器上都是糟糕的用户体验，尤其是在mobile@louyspatricebesette上。试图通过将代码添加到JSFiddel来找出你的代码，它似乎有输入错误或错误，你能重新检查吗@哈伊姆·胡里