0

我正在尝试执行一些 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!");
}

更新：

由于其中一条评论，我现在有了这个工作，它在滚动回顶部时触发“回到顶部”警报，但在每次滚动时触发“滚动”警报。仅当滚动条从顶部移动到顶部以外的任何其他位置时，如何才能触发“滚动”警报？

这是代码：

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

2 回答 2

0

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

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!");
}
于 2013-04-06T19:55:54.557 回答
0

用户滚动 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>
于 2013-04-06T20:43:15.763 回答