首頁猿問 Jquery檢查元素在視口中是否可見

Jquery檢查元素在視口中是否可見

JavaScript JQuery

小怪獸愛吃肉 2019-08-02 15:54:10

Jquery檢查元素在視口中是否可見用于檢查div類“media”是否在瀏覽器可視視口內，而不管窗口滾動位置如何。<HTML><HEAD> <TITLE>My first HTML document</TITLE></HEAD><BODY> <div class="main"> <div class="media"></div> </div></BODY></HTML>嘗試使用此插件https://github.com/customd/jquery-visible與此功能，但我不知道如何使其工作。$('#element').visible( true );

查看完整描述

3 回答

喵喔喔

TA貢獻1735條經驗獲得超5個贊

那么，你是怎么試圖讓它發(fā)揮作用的？根據(jù)該插件的文檔，.visible()返回一個布爾值，指示該元素是否可見。所以你要像這樣使用它：

if ($('#element').visible(true)) {

// The element is visible, do something

} else {

// The element is NOT visible, do something else

}

反對回復 2019-08-02

蝴蝶不菲

TA貢獻1810條經驗獲得超4個贊

使用jquery檢查元素在視口中是否可見：

首先確定元素的頂部和底部位置。然后通過將滾動位置添加到視口高度來確定視口底部的位置（相對于頁面頂部）。

如果視口的底部位置大于元素的頂部位置并且視口的頂部位置小于元素的底部位置，則該元素位于視口中（至少部分地）。簡單來說，當元素的任何部分位于視口的頂部和底部邊界之間時，該元素在屏幕上可見。

現(xiàn)在您可以編寫if / else語句，其中if語句僅在滿足上述條件時運行。

下面的代碼執(zhí)行上面解釋的內容：

// this function runs every time you are scrolling$(window).scroll(function() {
    var top_of_element = $("#element").offset().top;
    var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
    var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
    var top_of_screen = $(window).scrollTop();

    if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
        // the element is visible, do something
    } else {
        // the element is not visible, do something else
    }});

這個答案總結了Chris Bier和Andy在下面討論的內容。我希望在像我這樣做研究時幫助其他遇到這個問題的人。我還使用了以下問題的答案來表達我的答案：滾動位置時顯示Div。

反對回復 2019-08-02

小唯快跑啊

TA貢獻1863條經驗獲得超2個贊

您可以編寫這樣的jQuery函數(shù)來確定元素是否在視口中。

在包含jQuery之后將其包括在內：

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;};

樣品用法：

$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // do something
    } else {
        // do something else
    }});

請注意，這僅檢查元素的頂部和底部位置，而不檢查元素是否水平位于視口之外。

反對回復 2019-08-02