在 MVC 5 应用程序中检测滚动到局部视图的底部

Posted 2023-05-09

【中文标题】在 MVC 5 应用程序中检测滚动到局部视图的底部

【英文标题】：Detect scrolling to bottom of a partial view in an MVC 5 application

【发布时间】：2016-08-29 03:59:02

【问题描述】：

我有一个在 html 表中返回大量数据的部分视图。我已经使用 jquery here 实现了无限滚动技术，以便在您向下滚动时加载表格。当我从视图渲染局部视图时，一切都按预期工作。但滚动是在页面级别。我只想在部分视图表周围有滚动条。 问题是当我在局部视图周围放置一个标签来设置滚动时，它没有检测到滚动何时到达底部。

我看到了一个针对 iframe here 的实现，但我需要它用于局部视图。

视图只有表格标题和一些文本，然后它调用下面的部分视图。

<div style="height: 400px; width: 600px; overflow: auto;">
        <div id="loading"></div>   
        <div id="productList">            
                @Html.Partial("_PartialViewName")            
        </div>  
</div>

这些是javascripts。如何设置 .scroll 函数以检测局部视图中的滚动？

function loadProducts() 
        if (page > -1 && !_inCallback) 
            _inCallback = true;
            page++;
            $('div#loading').html('<p><img src="/Content/Images/ajax-loader.gif"></p>');
            $.get("/Users/Index/" + page, function (data) 
                if (data != '') 
                    $("#productList").append(data);
                
                else 
                    page = -1;
                

                _inCallback = false;
                $('div#loading').empty();
            );
        
    


    $(window).scroll(function () 
        if ($(window).scrollTop() == $(document).height() - $(window).height()) 

            loadProducts();
        
    );

【问题讨论】：

你在处理window滚动事件，但是你需要在你的partial中处理元素的滚动事件。

【参考方案1】：

也许，您需要更改滚动功能。您是否尝试过使用“#productList”更改“窗口”？ 我现在不能尝试，抱歉，这只是一个想法。

已编辑：Here 是我在 jsfiddle 中找到的一个示例。希望这会对你有所帮助。

$(".box").scroll(function() 
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) 
        $("span").show();    
     else 
        $("span").hide();
    
);

已编辑 2：我发现我的答案不正确：您正在尝试捕获窗口中的滚动。您需要使用 overflow:auto... 捕获 div 中的滚动...

html

<div id="overflowdiv" style="height: 400px; width: 600px; overflow: auto;">
        <div id="loading"></div>   
        <div id="productList">

js

    $("#overflowdiv").scroll(function () 
        console.debug("scroll activado!");
        console.debug($(this).scrollTop() + $(this).innerHeight() + " " + $(this)[0].scrollHeight);

        if( $(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) 
            loadProducts();
        
    ); 

这对我来说很好用。