用户滚动时尝试执行js代码答案

【问题标题】：Trying to execute js code when the user scrolls用户滚动时尝试执行js代码
【发布时间】：2013-04-06 19:28:48
【问题描述】：

我正在尝试执行一些 js 代码，现在当滚动条从顶部移动到任何其他高度时，它们被警报替换。

因此，当用户第一次滚动时，“已滚动”警报将触发。如果用户滚动回顶部，它会重置并触发“返回顶部”警报。

我尝试使用 scrollTop、scrollHeight 和 clientHeight 执行此操作，但它似乎不会在滚动时触发警报。

我不想在每次用户滚动时触发警报，只是在第一次滚动时。但如果用户滚动回顶部，它会重置并触发新警报。

因此，如果他们从顶部滚动到 X，则会触发“滚动”警报。如果他们从 X 滚动到 Y，则不会发生任何事情。如果从 X 或 Y 滚动到顶部，则会触发“返回顶部”。然后如果从顶部滚动到 X 或 Y，它会重置并且警报“滚动”触发（再次）。

这是我的代码：

var body = $('body');
var scrollTop = body.scrollTop;
var difference = body.scrollHeight - body.clientHeight;
var percentScrolled = (scrollTop/difference)*100;
if(percentScrolled > 0){
alert("scrolled!");
}

更新：

感谢其中一个 cmets，我现在可以正常工作，它在滚动回顶部时会触发“返回顶部”警报，但会在每次滚动时触发“滚动”警报。仅当滚动条从顶部移动到顶部以外的任何其他位置时，如何才能触发“滚动”警报？

代码如下：

window.onscroll = function () { 
    var doc = document.body, 
    scrollPosition = doc.scrollTop,
    pageSize = (doc.scrollHeight - doc.clientHeight),
    percentageScrolled = Math.floor((scrollPosition / pageSize) * 100);

    if(percentageScrolled == 0){
        alert("back at top");
    }
    else if(percentageScrolled > 0){
        alert("scrolled");
    }
};

【问题讨论】：

当然可以，当您滚动回顶部时，scrollTop 再次为零。
代码stackoverflow.com/questions/1247874/changing-scrollbar-position和示例jsbin.com/eqote
@Grmn 谢谢。这有帮助，但仍然存在一个问题。我更新了描述它的帖子。
if(percentageScrolled > 0){ alert("scrolled"); } 将在您开始滚动时执行。并且警报返回顶部，您应该将其更改为例如 20%，或者您希望它成为人们向下滚动的最大允许值。
else if(percentageScrolled > 0){ 将其更改为 > 1 现在它会在滚动时触发，并且只有在 pos = 0 时才会触发。

标签： javascript jquery

【解决方案1】：

用户滚动 x% 后使用 javascript 自动返回顶部的示例。正如 noidea3p5 所问的那样，你到底想做什么..

var AllowedPercentageToScroll = 20;
window.onscroll = function () { 
    var doc = document.body, 
    scrollPosition = doc.scrollTop,
    pageSize = (doc.scrollHeight - doc.clientHeight),
    percentageScrolled = Math.floor((scrollPosition / pageSize) * 100);

    if(percentageScrolled > AllowedPercentageToScroll){
       window.scrollTo(0,0); // back to top
    }
    else if(percentageScrolled > 0){ // if user starts to scroll it will trigger
        //do whatever you like, dont recommend alert though
    }
};

编辑：如果在顶部则显示状态，并在开始滚动时显示滚动活动

window.onscroll = function () { 
    var doc = document.body, 
    scrollPosition = doc.scrollTop,
    pageSize = (doc.scrollHeight - doc.clientHeight),
    percentageScrolled = Math.floor((scrollPosition / pageSize) * 100);

    if(percentageScrolled == 0){
       document.getElementById("status").innerHTML = "Your at the top";    
    }
    else if(percentageScrolled > 1){
        document.getElementById("status").innerHTML = percentageScrolled + "%";      
    }
};

</script>
<body>
<div style="width: 100%; position: fixed; top:0px; background-color:#c0c0c0;">
   Scroll Position: <span id="status">0%</span>
</div>

【讨论】：

我不想让用户使用 .scrollTo 滚动到任何地方或限制他们可以滚动的距离。我只想听听他们何时滚动，从哪里滚动到滚动到哪里，以及滚动了多少。当他们从顶部滚动到滚动条轨道上的任何位置时，然后触发警报，然后当他们从任何位置滚动回顶部时，以相反的方式触发不同的警报。稍后将用其他代码替换警报。
这里你可以找到一个很好的例子，使用普通的javascript和jQuery来检测向上/向下，换句话说，你可以通过稍微修改一下，检测它们来自哪里以及去哪里到。 stackoverflow.com/questions/1222915/…
谢谢你的帮助。感谢您的所有帮助！

【解决方案2】：

不确定您要做什么，但听起来您可能想要某种标志：

var body = $('body');
var scrollTop = body.scrollTop;
var difference = body.scrollHeight - body.clientHeight;
var percentScrolled = (scrollTop/difference)*100;

if(percentScrolled > 0 && this.leftzero === undefined){
   this.leftzero = true;
   alert("scrolled!");
}

【讨论】：