面临滚动精确元素并将数据添加到窗口滚动的 div 的问题答案

【问题标题】：Facing issues to scroll exact element and add data to div on window scroll面临滚动精确元素并将数据添加到窗口滚动的 div 的问题
【发布时间】：2021-04-09 08:20:03
【问题描述】：

有 1 个主要部分正在显示，4 个空白部分不显示。在滚动到窗口底部时，它工作正常。滚动到底部时，将数据添加到 div 并在您到达底部时将其一一显示。但我想改变它。如果只有主 div 并且当用户滚动到达主 div 时显示 #flash-sale 并再次当用户滚动到达 #flash-sale 然后显示 #men-category 所有 div 的相同过程。我的代码在JSFiddle。

HTML

<div class="main" style="height:100px;background:#eee">Main</div>
<div style="height:100px;background:#eee;display:none" id="flash-sale"></div>
<div style="height:100px;background:#ccc;display:none" id="men-category"></div>
<div style="height:100px;background:#eee;display:none" id="women-category"></div>
<div style="height:100px;background:#ccc;display:none" id="all-products"></div>

jQuery

var pages = ["flash-sale","men-category","women-category","all-products"];
var count = 0;
var scrollFlag = true;
$(window).scroll(function(){
    if($(scrollFlag && window).scrollTop() == $(document).height() - $(window).height()){
        var name = pages[count];
        count++;
        if(count >= pages.length) scrollFlag = false;
        $("#"+name).append(name).css("display", "block");
    }
});

编辑代码并在此处面临问题。当我更改代码$(window).scrollTop() >= target 时，主 div 上的滚动到达位置不正确，它会在一个滚动中显示所有 div。

var target = $(".main").offset().top;
var pages = ["flash-sale","men-category","women-category","all-products"];
var count = 0;
var scrollFlag = true;
$(window).scroll(function(){
    if(scrollFlag && $(window).scrollTop() >= target){
        var name = pages[count];
        count++;
        if(count >= pages.length) scrollFlag = false;
        $("#"+name).append(name).css("display", "block");
    }
});

【问题讨论】：

标签： jquery scroll infinite-scroll

【解决方案1】：

我刚刚解决了这个问题，新代码如下。也更新在JSfiddle

var pages = ["flash-sale","men-category","women-category","all-products"];
var count = 0;
var scrollFlag = true;
$(window).scroll(function(){
    if(scrollFlag){
        if(count === 0){
            var target = $(".main").offset().top;
            var targetHeight = $(".main").outerHeight();
        }
        else
        {
            var target = $("#"+pages[count-1]).offset().top;
            var targetHeight = $("#"+pages[count-1]).outerHeight();
        }
        if($(window).scrollTop() > target - targetHeight){
            var name = pages[count];
            count++;
            if(count >= pages.length) scrollFlag = false;
            $("#"+name).append(name).css("display","block");
        }
    }
});

【讨论】：