向下滾動jQuery時如何獲取瀏覽器屏幕窗口的位置

Question

這是腳本，當用戶滾動到網站底部時腳本將從數據庫查詢數據，但是我想在箭頭欄等於瀏覽器底部之前查詢數據。 我想查詢數據或在用戶滾動到2/3或接近瀏覽器底部時加載ajax，而不是直到瀏覽器底部

$(document).ready(function () {
    var lastScrollTop = 0;

    document.addEventListener("scroll", function() { // or window.addEventListener("scroll"....

        var st = window.pageYOffset || document.documentElement.scrollTop;

        if (st > lastScrollTop) {

            if ($(window).scrollTop() + $(window).height() === $(document).height()) {

                $.ajax({
                    url:'products/scroll',
                    method:'get',
                    dataType:'html',
                    data:{},
                    success : function (data, status) {
                        console.log(data);
                        $(data).appendTo('.load-more-block')
                    }
                })
            }
        }

        lastScrollTop = st;
    }, false);
});

Answer 1

這應該工作。 如果要獲得“無限滾動”效果，每當您的DOM用ajax請求中的新值更新時，就必須重置triggerFlag ，並將docHeight和triggerHeight值重新更新為新的文檔高度。

 $(document).ready(function(){ var docHeight = $(document).height(); var triggerHeight = docHeight*0.6667; $("#docHeight").text(docHeight); //Ignore $("#triggerHeight").text(triggerHeight); //Ignore var triggerFlag = false; $(window).scroll(function(){ $("#height").text($(this).scrollTop()); //Ignore if (!triggerFlag && $(this).scrollTop() > triggerHeight){ //Execute code here triggerFlag = true; $("#status").text("Executed at " + new Date()); } }); });

 html{ height: 6000px; } p{ position: fixed; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <p> Current Height: <span id='height'>0</span><br> Window Height: <span id='docHeight'>0</span><br> Trigger Height: <span id='triggerHeight'>0</span><br> Status: <span id='status'>false</span> </p> </body> </html>

向下滾動jQuery時如何獲取瀏覽器屏幕窗口的位置

問題描述

1 個解決方案

解決方案1
1 已采納 2016-07-28 18:28:45

向下滾動jQuery時如何獲取瀏覽器屏幕窗口的位置

問題描述

1 個解決方案

解決方案1 1 已采納 2016-07-28 18:28:45

解決方案1
1 已采納 2016-07-28 18:28:45