{"id":67728,"date":"2017-01-15T16:32:20","date_gmt":"2017-01-15T08:32:20","guid":{"rendered":"http:\/\/www.xiaoyebailong.com\/?p=67728"},"modified":"2017-02-26T02:00:10","modified_gmt":"2017-02-25T18:00:10","slug":"jquery%e5%ae%9e%e7%8e%b0%e9%a1%b5%e9%9d%a2%e4%b8%8b%e6%8b%89%e6%bb%9a%e5%8a%a8%e5%8a%a0%e8%bd%bd%e5%86%85%e5%ae%b9%e7%ac%ac%e4%ba%8c%e7%89%88","status":"publish","type":"post","link":"http:\/\/www.xiaoyebailong.com\/index.php\/2017\/01\/15\/67728.htm","title":{"rendered":"Jquery\u5b9e\u73b0\u9875\u9762\u4e0b\u62c9\u6eda\u52a8\u52a0\u8f7d\u5185\u5bb9\u7b2c\u4e8c\u7248"},"content":{"rendered":"

Jquery\u5b9e\u73b0\u9875\u9762\u4e0b\u62c9\u6eda\u52a8\u52a8\u6001\u52a0\u8f7d\u5185\u5bb9<\/a><\/strong><\/p><\/blockquote>\n

\u611f\u89c9\u5199\u5f97\u4e0d\u662f\u5f88\u597d\uff0c\u6700\u8fd1\u8981\u65b0\u5199\u4e00\u4e2a\u624b\u673a\u9879\u76ee\uff0c\u611f\u89c9\u4e0a\u9762\u4e0d\u662f\u7528\u5f97\u5f88\u8212\u670d\uff0c\u7136\u540e\u5c31\u65b0\u5199\u4e86\u4e00\u4e2a\uff0c\u6539\u52a8\u4e0d\u662f\u5f88\u5927\u3002<\/p>\n

\u5224\u65ad\u5230\u5e95\u90e8<\/p>\n

\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n<\/pre>\n<\/td>\n
\n
$(window).scroll(function () {\r\n    if ($(document).scrollTop() + $(window).height() >= $(document).height()) {\r\n        alert(\"\u54e6\u54e6,\u5230\u5e95\u4e86.\");\r\n    }\r\n});<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\u5982\u679c\u8981\u5b9e\u73b0\u62c9\u5230\u5e95\u90e8\u81ea\u52a8\u52a0\u8f7d\u5185\u5bb9\u3002\u53ea\u8981\u6ce8\u518c\u4e2a\u6eda\u52a8\u6761\u4e8b\u4ef6\uff1a
\n\u9996\u5148\uff0c\u6211\u4eec\u62c9\u52a8\u6eda\u52a8\u6761\uff0c\u4ece\u6700\u4e0a\u9762\u62c9\u5230\u6700\u4e0b\u9762\uff0c\u53d8\u5316\u7684\u662fscrollTop\u7684\u503c\uff0c\u800c\u8fd9\u4e2a\u503c\u662f\u6709\u4e00\u4e2a\u533a\u95f4\u7684\u3002
\n\u8fd9\u4e2a\u533a\u95f4\u662f\uff1a [0, (offsetHeight \u2013 clientHeight)]
\n\u5373\uff0c\u6eda\u52a8\u6761\u62c9\u52a8\u7684\u6574\u4e2a\u8fc7\u7a0b\u7684\u53d8\u5316\u5728 0 \u5230 (offsetHeight \u2013 clientHeight) \u8303\u56f4\u4e4b\u5185\u3002
\n1\u3001\u5224\u65ad\u6eda\u52a8\u6761\u6eda\u52a8\u5230\u6700\u5e95\u7aef\uff1a scrollTop == (offsetHeight \u2013 clientHeight)
\n2\u3001\u5728\u6eda\u52a8\u6761\u8ddd\u79bb\u5e95\u7aef50px\u4ee5\u5185\uff1a (offsetHeight \u2013 clientHeight) \u2013 scrollTop < = 50 3\u3001\u5728\u6eda\u52a8\u6761\u8ddd\u79bb\u5e95\u7aef5%\u4ee5\u5185\uff1a scrollTop \/ (offsetHeight \u2013 clientHeight) >= 0.95<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n<\/pre>\n<\/td>\n
\n
scrollBottomTest =function(){\r\n     $(\"#contain\").scroll(function(){\r\n         var $this =$(this),\r\n         viewH =$(this).height(),\/\/\u53ef\u89c1\u9ad8\u5ea6\r\n         contentH =$(this).get(0).scrollHeight,\/\/\u5185\u5bb9\u9ad8\u5ea6\r\n         scrollTop =$(this).scrollTop();\/\/\u6eda\u52a8\u9ad8\u5ea6\r\n        \/\/if(contentH - viewH - scrollTop < = 100) { \/\/\u5230\u8fbe\u5e95\u90e8100px\u65f6,\u52a0\u8f7d\u65b0\u5185\u5bb9\r\n        if(scrollTop\/(contentH -viewH)>=0.95){ \/\/\u5230\u8fbe\u5e95\u90e8100px\u65f6,\u52a0\u8f7d\u65b0\u5185\u5bb9\r\n        \/\/ \u8fd9\u91cc\u52a0\u8f7d\u6570\u636e..\r\n        }\r\n     });\r\n}<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\u5224\u65ad\u5782\u76f4\u6eda\u52a8\u6761\u662f\u5426\u5230\u8fbe\u5e95\u90e8
\n\u7406\u6e05\u4e86\u4ee5\u4e0a\u7684\u6982\u5ff5\uff0c\u7f16\u7801\u5176\u5b9e\u5c31\u6bd4\u8f83\u7b80\u5355\u4e86\uff0c \u4ee5\u4e0b\u662f\u793a\u4f8b\u4ee3\u7801\uff1a<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n<\/pre>\n<\/td>\n
\n
      <script language=\"javascript\" src=\"jquery-1.4.2.min.js\"><\/script>\r\n      <script language=\"javascript\">\r\n      $(document).ready(function (){\r\n        var nScrollHight = 0; \/\/\u6eda\u52a8\u8ddd\u79bb\u603b\u957f(\u6ce8\u610f\u4e0d\u662f\u6eda\u52a8\u6761\u7684\u957f\u5ea6)\r\n        var nScrollTop = 0;   \/\/\u6eda\u52a8\u5230\u7684\u5f53\u524d\u4f4d\u7f6e\r\n        var nDivHight = $(\"#div1\").height();\r\n        $(\"#div1\").scroll(function(){\r\n          nScrollHight = $(this)[0].scrollHeight;\r\n          nScrollTop = $(this)[0].scrollTop;\r\n          if(nScrollTop + nDivHight >= nScrollHight)\r\n            alert(\"\u6eda\u52a8\u6761\u5230\u5e95\u90e8\u4e86\");\r\n          });\r\n      });\r\n      <\/script>\r\n    <body>\r\n    <div id=\"div1\" style=\"overflow-y:auto; overflow-x:hidden; height:500px;\">\r\n      <div style=\"background-color:#ccc; height:750px;\">IE \u548c FF \u4e0b\u6d4b\u8bd5\u901a\u8fc7<\/div>\r\n    <\/div>\r\n<\/body><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\u5185\u90e8div\u9ad8\u5ea6\u4e3a750\uff0c\u5916\u90e8div\u9ad8\u5ea6\u4e3a500\uff0c\u6240\u4ee5\u5782\u76f4\u6eda\u52a8\u6761\u9700\u8981\u6eda\u52a8750-500=250\u7684\u8ddd\u79bb\uff0c\u5c31\u4f1a\u5230\u8fbe\u5e95\u90e8\uff0c\u53c2\u89c1\u8bed\u53e5nScrollTop + nDivHight >= nScrollHight\u3002
\n\u7a0b\u5e8f\u4e2d\uff0c\u5728\u5916\u90e8div\u7684scroll\uff08\u6eda\u52a8\uff09\u4e8b\u4ef6\u4e2d\u4fa6\u6d4b\u548c\u6267\u884cif\u5224\u65ad\u8bed\u53e5\uff0c\u662f\u975e\u5e38\u6d88\u8017CPU\u8d44\u6e90\u7684\u3002\u7528\u9f20\u6807\u62d6\u62c9\u6eda\u52a8\u6761\uff0c\u53ea\u8981\u6709\u4e00\u4e2a\u50cf\u7d20\u7684\u53d8\u52a8\u5c31\u4f1a\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002\u4f46\u70b9\u51fb\u6eda\u52a8\u6761\u4e24\u5934\u7684\u7bad\u5934\uff0c\u4e8b\u4ef6\u89e6\u53d1\u7684\u9891\u7387\u4f1a\u4f4e\u5f97\u591a\u3002
\n\u6240\u4ee5\u6eda\u52a8\u6761\u7684scroll\u4e8b\u4ef6\u8981\u8c28\u614e\u4f7f\u7528\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Jquery\u5b9e\u73b0\u9875\u9762\u4e0b\u62c9\u6eda\u52a8\u52a8\u6001\u52a0\u8f7d\u5185\u5bb9 \u611f\u89c9\u5199\u5f97\u4e0d\u662f\u5f88\u597d\uff0c\u6700\u8fd1\u8981\u65b0\u5199\u4e00\u4e2a\u624b\u673a\u9879\u76ee\uff0c\u611f\u89c9\u4e0a\u9762\u4e0d\u662f\u7528\u5f97\u5f88\u8212\u670d\uff0c\u7136\u540e\u5c31\u65b0\u5199\u4e86\u4e00\u4e2a\uff0c\u6539\u52a8\u4e0d\u662f\u5f88\u5927\u3002 \u5224\u65ad\u5230\u5e95\u90e8 1 2 3 4 5 $(window).scroll(function () { if…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,1],"tags":[70,254],"topic":[],"class_list":["post-67728","post","type-post","status-publish","format-standard","hentry","category-htmlcss","category-technology","tag-jquery","tag-254"],"_links":{"self":[{"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/posts\/67728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/comments?post=67728"}],"version-history":[{"count":1,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/posts\/67728\/revisions"}],"predecessor-version":[{"id":67729,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/posts\/67728\/revisions\/67729"}],"wp:attachment":[{"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/media?parent=67728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/categories?post=67728"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/tags?post=67728"},{"taxonomy":"topic","embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/topic?post=67728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}