Question

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

Answer 1

不确定你要做什么，但听起来你可能想要某种旗帜：

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

Answer 2

在用户滚动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>

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

2 个答案: