javascript實現捲軸滾動載入內容

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

說明：自從Bing搜尋實現滾動式載入內容後，google,baidu都實現了類似的功能。

步驟 1：開啟Visual Studio 2010 ，建立項目www.scrollpage.com.

步驟 2：添加一個HTML檔案，命名：ScrollLoadPage.html，項目引用了Jquery1.8.2架構

步驟 3：添加代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>demo</title>    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>    <style type="text/css">        div#Loadding { text-align: center; margin-top: 10px; display: none; font-weight: bold; color:Red; }        div.content { width: 100%; height: 900px; border-bottom: 1px solid gray;  font-weight: bold; color:Red;text-align: center;}    </style>    <script type="text/javascript">        if (!NeuF) var NeuF = {};        NeuF.ScrollPage = function (obj, options, callback) {            var _defaultOptions = { delay: 500, marginBottom: 100 }; //預設配置：延遲時間delay和捲軸距離底部距離marginBottom            options = $.extend(_defaultOptions, options);            this.isScrolling = false; //是否在滾動            this.oriPos = 0; //原始位置            this.curPos = 0; //當前位置            var me = this; //頂層            var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj);            //綁定滾動事件            $obj.scroll(function (ev) {                me.curPos = $obj.scrollTop();                if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) {                    if (me.isScrolling == true) return;                    me.isScrolling = true;                    setTimeout(function () { me.isScrolling = false; }, options.delay);   //重複觸發間隔毫秒                    if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos);                };                me.oriPos = me.curPos;            });        };        $(function () {            window.scrollTo(0, 0); //每次F5重新整理把捲軸置頂            //marginBottom表示捲軸離底部的距離，0表示滾動到最底部才載入，可以根據需要修改              new NeuF.ScrollPage(window, { delay: 1000, marginBottom: 0 }, function (offset) {                if (offset > 0) {                    $("#Loadding").show(); //載入提示                    setTimeout(function () {                        //這裡就是非同步擷取內容的地方，這裡簡化成一句話，可以根據需要修改                        $("#divContainer").append($("<div class='content'>第“" + ($(".content").size() + 1) + "”頁內容</div>"));                        //內容擷取後，隱藏載入提示                        $("#Loadding").hide();                    }, 1000);                }            });        });    </script></head><body>    <div id="divContainer">        <div class="content">            這裡是內容，嘗試滾動，載入下一頁內容。如果是大螢幕顯示器，<br />請把CSS div.content 高度調高，以便看到滾動效果 </div>    </div>    <div id="Loadding">        正在載入，請稍候 ...</div></body></html>

步驟 4：在瀏覽器中查看ScrollLoadPage.html。

下面給出了項目源碼：

http://files.cnblogs.com/HCCZX/www.scrollpage.com.rar

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More