当div被中途滚动时,返回记录

时间:2017-04-11 11:03:21

标签: javascript jquery asp.net

我正在调用一个ajax函数来加载一个GridView,当div滚动到底部并且我的代码工作正常但是我想在div处于中途滚动时调用该函数,这样用户就不必等着拿记录。

.ASPX HTML

 <table class="Grid" cellspacing="0" rules="all" border="1" id="Table1" style="width: 99%; border-collapse: collapse;">
            <tr>
                <th scope="col" style="width: 10%">ID</th>
                <th scope="col" style="width: 30%;">Title</th>
                <th scope="col" style="width: 20%;">Theme</th>
                <th scope="col" style="width: 14%;">Subject</th>
                <th scope="col" style="width: 14%;">Grade</th>
            </tr>
        </table>

        <div id="dvGrid" style="height: 800px; overflow: auto; width: 100%">
            <asp:GridView ID="gridSearchResult" runat="server" AutoGenerateColumns="false" CssClass="Grid" Width="99%" EmptyDataText="No records found!!!">
                <Columns>
                    <asp:BoundField DataField="tid" HeaderText="ID" ItemStyle-CssClass="tid" ItemStyle-Width="10%" HeaderStyle-Width="10%" />
                    <asp:BoundField DataField="title" HeaderText="Title" ItemStyle-CssClass="title" ItemStyle-Width="30%" HeaderStyle-Width="30%" />
                    <asp:BoundField DataField="theme" HeaderText="Theme" ItemStyle-CssClass="theme" ItemStyle-Width="20%" HeaderStyle-Width="20%" />
                    <asp:BoundField DataField="subject" HeaderText="Subject" ItemStyle-CssClass="subject" ItemStyle-Width="14%" HeaderStyle-Width="14%" />
                    <asp:BoundField DataField="grade" HeaderText="Grade" ItemStyle-CssClass="grade" ItemStyle-Width="14%" HeaderStyle-Width="14%" />
                </Columns>
            </asp:GridView>
        </div>

的Javascript

   //Load GridView Rows when DIV is scrolled
            $("#dvGrid").on("scroll", function (e) {
                var $o = $(e.currentTarget);
                if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {

                    GetRecords();
                }
            });

当我滚动Div的一半时,我需要在上面的javascript函数中进行哪些更改才能调用 GetRecords()

1 个答案:

答案 0 :(得分:0)

将高度乘以2,基本上就像容器的高度加倍。

$o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight() * 2