微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

我的自动滚动功能似乎无法正常使用滚轮,但它适用于我尝试过的其他滚动方法触摸屏和触摸板

如何解决我的自动滚动功能似乎无法正常使用滚轮,但它适用于我尝试过的其他滚动方法触摸屏和触摸板

我有一个功能,当用户滚动一点点时,它会自动滚动一页高度。此功能适用于在触摸屏上滚动和在触摸板上用两根手指滚动,但在使用鼠标滚轮滚动时不起作用。我想知道是否有人会知道为什么或如何让它正常工作?

var currentURL = window.location.href;
var lastScrollTop = 0;
var scrollingcount = 0;
var near = 0;
var x = false;
var direction = 'null';
var elmnt = document.getElementById("content"); //this is the element that scrolls
elmnt.addEventListener("scroll",runOnScroll,{passive: false,useCaptue: true});

这个(上面)是页面第一次加载时加载的代码,它定义了变量并添加了事件监听器。

function runOnScroll(){
page = window.innerHeight;
whole = elmnt.scrollHeight;
pages = whole/page;
pages = Math.floor(pages);
page = whole/pages;
scrollingcount = scrollingcount + 1;
var currentscrolltop = elmnt.scrollTop;
if((direction == 'up' && currentscrolltop >= lastScrollTop) || (direction == 'down' && currentscrolltop <= lastScrollTop)){x=true;}
setTimeout(() => scrollingcount = scrollingcount - 1,100);
if(scrollingcount <= 1 || x == true){
    //alert(near);
    x = false;
    near = Math.ceil(currentscrolltop/page)*page;
    if(near >= currentscrolltop && currentscrolltop < lastScrollTop){near = near - page}
}
    if (currentscrolltop > lastScrollTop){//down
        if(currentscrolltop <= near){
            if(near - currentscrolltop < page/50){
                elmnt.scrollTop = near
            }else{
            elmnt.scrollTop = currentscrolltop + page/50
            }
            direction = 'down'
        }            
    }else if(currentscrolltop < lastScrollTop){//up
        if(currentscrolltop > near){
            if( currentscrolltop - near < page/50){
                elmnt.scrollTop = near
            }else{
            elmnt.scrollTop = currentscrolltop - page/50;
            }
            direction = 'up'
        }
    }else{
}
lastScrollTop = currentscrolltop <= 0 ? 0 : currentscrolltop // For Mobile or negative scrolling
}

函数解释)所以我有一个 js 函数,它在滚动时触发,它滚动到最近的孔页面高度。它开始获取页面高度,这是前 5 行所做的,然后它增加一个名为 scrollingcount 的变量,这个变量用于阻止函数每次运行时计算它需要去的位置,这导致它只是不断滚动直到它到达页面底部。 if 语句在检查用户没有改变方向之后,超时会在短时间内减少变量。 if 语句检查变量是否等于或小于 1,或者方向是否已改变。如果有,则重新计算near。如果它向下,下一个和平代码会查看它有多接近,如果它在最近点的 1/50 内,它会将高度设置为等于它,否则它会向下滚动页面的 1/50,再次触发该功能。往上走也是一样。然后它将最后一个滚动设置为当前滚动,以便下次运行时变量准备就绪。

确保将其放入页面底部的脚本部分并为您的正文提供内容 id 应该允许您对其进行测试。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。