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

Trying to execute js code when the user scrolls

本文关键字：执行 js 代码 滚动 用户      更新时间：2023-09-26

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

因此，当用户第一次滚动时，警报"已滚动"将触发。如果用户滚动到顶部，它会重置并触发一个警告"back at top"。

我试着用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");
    }
};

使用javascript在用户滚动x %后自动返回顶部的示例。正如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>

不知道你在做什么，但听起来你可能想要一些标志:

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!");
}
相关文章：