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

Posted 2023-05-07

【中文标题】面临滚动精确元素并将数据添加到窗口滚动的 div 的问题

【英文标题】：Facing issues to scroll exact element and add data to div on window scroll

【发布时间】：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");
    
);

【参考方案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");
        
    
);