我的JQuery向下滚动工作，但向上滚动不工作

My JQuery Scroll Down works but scroll up doesn't work at all

本文关键字：工作 滚动 我的 JQuery      更新时间：2023-09-26

我在html中放入了几个div，其中一行的id以字母d开头，例如:#d1， #d2， #d3…然后我创建了下面的javascript代码:

    var pos = 0;
$("#button-up").on('click', function(e) {
    e.preventDefault();
    if(pos > 1){
    pos -= 1;
    $("html, body").stop().animate({
        'scrollTop': $("#d"+pos).offset().top-300},200,"swing");
};
});
$("#button-down").on('click', function(e) {
    e.preventDefault();
    if(pos < 10){
    pos += 1;
    $("html, body").stop().animate({
        'scrollTop': $("#d"+pos).offset().top-300},200,"swing");
};
});
    window.addEventListener("scroll", function(event) {
var posi = this.pageYOffset;
if(posi-(pos-1)*1070+50 >= 1070){pos += 1} else if((pos-1)*1070+50-posi <= -1070){pos -= 1};
});

最后我的网站滚动向下当我点击按钮向下，但我需要点击两次按钮向上滚动。为什么?还有比这更好的方法能得到预期的结果吗?

我让它工作改变这部分:

 window.addEventListener("scroll", function(event) {
var posi = this.pageYOffset;
if(posi-(pos-1)*1070+50 >= 1070){pos += 1} else if((pos-1)*1070+50-posi <= -1070){pos -= 1};
 });

和这个:

     window.addEventListener("mousewheel", function(e) {
    e.preventDefault();
    console.log('passou por 6');
    var evt = window.event || e //equalize event object     

    evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF
if(delta > 0) {
    if(pos > 1){
            console.log('passou por 3');
            pos -= 1;
            $("html, body").stop().animate({
                'scrollTop': $("#d"+pos).offset().top-300},200,"swing");
            };
    //scroll up
    console.log('cima');
}
else{
    if(pos < 10){
            pos += 1;
            $("html, body").stop().animate({
                'scrollTop': $("#d"+pos).offset().top-300},200,"swing");
        };
    console.log('baixo');
    //scroll down
}; 
});

使用jquery的滚动函数

$(window).scroll(function(event){ 
    // your code
});
相关文章：