Question

我的页面中有10个div。第一个div是可见的，其他则是隐藏的。

div1,div2,div3----div10

在页面滚动中我想显示5个div。

div2----div6
div7---div12 (div12 not exist. I know but just want to show you limit)

在第二次页面滚动时我想再次显示 5 div ，如果超过 10 div ，它将再次出现。

total_data = 10
limit= 5
....Page scroll code comes here.....
for(i =1; i<=limit; i++)
div show i;
total_data= total_data +1
}

请不要害怕拼写错误，我只是在寻找逻辑。我会写清洁代码。

Answer 1

我会这样做（就像你问这只是代码的想法）：

var scrollTimes = 0; 
$('body').on('scroll',function(){
 scrollTimes++; //also add if statement when the scroll times reaches maximum to restart
 var limit = scrollTimes + 5;
 for(i = scrollTimes; i<=limit; i++)
   var x = i+5;
   div show x; //example $('#div' + x).show();
 } 
});

我希望这能让你开始。

Answer 2

我还没有测试过它。但我希望你能得到它的要点。我想出了一些东西。

var arrayOfDivs = $(".divs"); // divs to appear/disappear
var currentlyShownDivs = 1; // shown divs upon loading page
//optionally make the code more flexible by adding a variable for the no of divs to show.

$(body).scroll(function(){
//if function to detect scrollup or scrolldown
    //on scrolldown
    arrayOfDivs.hide();
    for(i=0; i<5 ;i++){
        if(i+currentlyShownDivs > arrayOfDivs.length){//stop code when scrolling too far
            break;
        }
        if(i+currentlyShownDivs < arrayOfDivs.length){ //don't run the code if divs to display do not exist
            arrayOfDivs.eq(i+currentlyShownDivs).show(); // show the next 5 divs one by one
        }
        if(i+currentlyShownDivs = arrayOfDivs.length || i=4){
            currentlyShownDivs += 5;//one time increment to enable the code to run for the next 5 divs.
        }
    }
    //on scrollup
        //simular code to do the opposite from scrolldown.
});

在jQuery中滚动显示5 div

2 个答案: