Heim > Web-Frontend > js-Tutorial > Hauptteil

Beispiel für die Implementierung eines jQuery-Scroll-Ereignisses zur Überwachung des Scrollbar-Pagings

高洛峰
Freigeben: 2017-01-11 09:44:51
Original
1309 Leute haben es durchsucht

Das Scroll-Ereignis gilt für Fensterobjekte, kann aber auch durch Iframe-Elemente scrollen, wenn die CSS-Überlaufeigenschaft auf Scrollen eingestellt ist.

$(document).ready(function () { //本人习惯这样写了
    $(window).scroll(function () {
        //$(window).scrollTop()这个方法是当前滚动条滚动的距离
        //$(window).height()获取当前窗体的高度
        //$(document).height()获取当前文档的高度
        var bot = 50; //bot是底部距离的高度
        if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
           //当底部基本距离+滚动的高度〉=文档的高度-窗体的高度时;
            //我们需要去异步加载数据了
            $.getJSON("url", { page: "2" }, function (str) { alert(str); });
        }
    });
});
Nach dem Login kopieren

Beachten Sie den Unterschied zwischen (window).height() und (document).height()

jQuery(window).height() stellt die Größe des aktuell sichtbaren Bereichs dar . jQuery(document).height() stellt die Höhe des gesamten Dokuments dar und kann je nach Situation verwendet werden

Beachten Sie, dass sich die Größe des Browserfensters ändert (z. B. nach dem Maximieren oder Vergrößern des Fensters). jQuery(window ).height() ändert sich entsprechend, jQuery(document).height() bleibt jedoch unverändert.

$(document).scrollTop() 获取垂直滚动的距离  即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离
Nach dem Login kopieren

Um die Oberseite zu erhalten, müssen Sie nur scrollTop()==0 abrufen, was die Oberseite ist.

Um die Unterseite zu erhalten, müssen Sie nur scrollTop() abrufen. >=$(document).height()-$(window).height() Sie können wissen, dass Sie nach unten gescrollt haben

$(document).height()  //是获取整个页面的高度
$(window).height()  //是获取当前 也就是你浏览器所能看到的页面的那部分的高度  这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的  根据英文应该也能理解吧
Nach dem Login kopieren

Machen Sie einfach ein Experiment und Sie werden es wissen

$(document).scroll(function(){
    $("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看-->
Nach dem Login kopieren

Weitere jQuery-Bildlaufereignisse Weitere verwandte Artikel zur Implementierung von Beispielen für die Überwachung der Bildlaufleisten-Paginierung finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage