在MVC 5应用程序中检测滚动到部分视图的底部 [英] Detect scrolling to bottom of a partial view in an MVC 5 application

问题描述

我有一个Partial视图，该视图在HTML表中返回大量数据.我已经使用jquery 此处实现了无限滚动技术在向下滚动时加载表格.当我从视图渲染部分视图时，一切都按预期进行.但滚动是在页面级别上.我只想在部分视图表周围使用滚动条.问题是，当我在局部视图周围放置标签以设置滚动时，它无法检测到滚动何时到达底部.

I have a Partial view that returns a large amount of data in an HTML table. I've implemented the infinite scrolling technique using jquery here to load the table as you scroll down. Everything works as expected when I rendered the partial view from a view. but the scrolling is on the page level. I want to have the scroll bar only around the partial view table. The problem is when I put a tag around the partial view to set a scroll, it doesn't detect when the scroll hits the bottom.

我在此处中看到了针对iframe的实现，但我需要它进行局部查看.

I saw an implementation for this for iframe here but I need it for a partial view.

该视图仅具有表标题和一些文本，然后调用下面的部分视图.

The view has only table headings and some text and then it calls the partial view below.

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

这些是JavaScript.如何设置.scroll函数以检测部分视图中的滚动?

These are the javascripts. How do I set the .scroll function to detect scrolling in the partial view?

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();
        }
    });

推荐答案

也许，您需要更改滚动功能.您是否尝试过使用"#productList"更改窗口"?我现在无法尝试，对不起，这只是一个主意.

Perhaps, you need a change in your scroll function. Have you tried change 'window' with '#productList'? I can't try it now, sorry, it's only an idea.

此处是我在jsfiddle中找到的一个示例.希望对您有帮助.

Edited: Here is an example I've found in jsfiddle. Hope this will help you.

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

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

Edited 2: I've found my answer was not correct: You're trying to capture scroll in the window. You need to capture the scroll in the div with overflow:auto...

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();
        }
    }); 

这对我来说很好.

这篇关于在MVC 5应用程序中检测滚动到部分视图的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！