Question

如果用户在他已经位于顶部时滚动到网页的顶部，我想要取消删除。这意味着正常滚动不应该触发动作，只要滚动条位于顶部并且用户进一步向上滚动它就会执行某些操作。

我已尝试使用下面的代码，但是当用户到达顶部而不是“过度滚动”时它会触发。 Here是jsfiddle。

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) ==window.innerHeight) {
        alert("The action");
    }
    document.getElementById('a').innerHTML= window.scrollY+";"+window.innerHeight+";"+(window.innerHeight+ + window.scrollY);
};

p{
  position: fixed;
}

<br>
<br><br>
<br>
<p id="a">sdf
</p>
<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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Answer 1

如果忽略窗口中的顶行像素是可以接受的，那么您可以将滚动位置设置为向下一个像素。然后，如果用户向上滚动到这个区域，那么好事就会发生。

你可以试试这样的小提琴：

var scrolling = false, w = $(window);
w.scrollTop(1);

w.on({
 scroll: function() {
   if(w.scrollTop() === 0){ // are we in the 'zero bufferzone'?
     $('#monitor').text('overscrolling');
   }
        
    clearTimeout(scrolling); // reset timer
    scrolling = setTimeout(function() {
        if(w.scrollTop() === 0){
           w.scrollTop(1); // shift down by a pixel
           $('#monitor').text(''); // reset
        }
    }, 250);
    }
});

body{
  height: 3000px;
}

#monitor{
  position: fixed;
  left: 1em;
  bottom: 1em;
}

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

使用javascript检测网页顶部的滚动

1 个答案: