使用jQuery获取div的可见高度 [英] Get the visible height of a div with jQuery

问题描述

我需要在可滚动区域内检索div的可见高度。我认为自己在jQuery方面相当不错，但这完全让我失望。

I need to retrieve the visible height of a div within a scrollable area. I consider myself pretty decent with jQuery, but this is completely throwing me off.

假设我在黑色包装中有一个红色div：

Let's say I've got a red div within a black wrapper:

在上图中，jQuery函数将返回248，即div的可见部分。

In the graphic above, the jQuery function would return 248, the visible portion of the div.

一旦用户滚过div的顶部，如上图所示，它将报告296。

Once the user scrolls past the top of the div, as in the above graphic, it would report 296.

现在，一旦用户滚过div，它会再次报告248。

Now, once the user has scrolled past the div, it would again report 248.

显然我的数字不会像在这个演示中那样一致和清晰，或者我只是硬代码那些数字。

Obviously my numbers aren't going to be as consistent and clear as they are in this demo, or I'd just hard code for those numbers.

我有一点理论：

• 获得高度窗口


• 获取div的高度


• 获取t的初始偏移量他从窗口顶部划分


• 在用户滚动时获取偏移量。
  
  
  
  
  • 如果偏移是正数，则意味着div的顶部仍然可见。
  
  
  • 如果它是负数， div的顶部被窗户黯然失色。此时，div可能占据窗口的整个高度，或者div的底部可能显示
  
  
  • 如果显示div的底部，请找出它和窗口底部之间的差距。
  
  
  • Get the height of the window
  • Get the height of the div
  • Get the initial offset of the div from the top of the window
  • Get the offset as the user scrolls.
    • If the offset is positive, it means the top of the div is still visible.
    • if it's negative, the top of the div has been eclipsed by the window. At this point, the div could either be taking up the whole height of the window, or the bottom of the div could be showing
    • If the bottom of the div is showing, figure out the gap between it and the bottom of the window.

    看起来很简单，但我无法绕过它。明天早上我会再接受一次破解;我只是觉得你们中的一些天才可能会有所帮助。

    It seems pretty simple, but I just can't wrap my head around it. I'll take another crack tomorrow morning; I just figured some of you geniuses might be able to help.

    谢谢！

    更新：我想这个我自己，但看起来下面的答案之一更优雅，所以我将使用它。对于好奇，这是我想出的：

    UPDATE: I figured this out on my own, but looks like one of the answers below is more elegant, so I'll be using that instead. For the curious, here's what I came up with:

    $(document).ready(function() {
        var windowHeight = $(window).height();
        var overviewHeight = $("#overview").height();
        var overviewStaticTop = $("#overview").offset().top;
        var overviewScrollTop = overviewStaticTop - $(window).scrollTop();
        var overviewStaticBottom = overviewStaticTop + $("#overview").height();
        var overviewScrollBottom = windowHeight - (overviewStaticBottom - $(window).scrollTop());
        var visibleArea;
        if ((overviewHeight + overviewScrollTop) < windowHeight) {
            // alert("bottom is showing!");
            visibleArea = windowHeight - overviewScrollBottom;
            // alert(visibleArea);
        } else {
            if (overviewScrollTop < 0) {
                // alert("is full height");
                visibleArea = windowHeight;
                // alert(visibleArea);
            } else {
                // alert("top is showing");
                visibleArea = windowHeight - overviewScrollTop;
                // alert(visibleArea);
            }
        }
    });
    

    
    

    推荐答案

    这是一个快速而肮脏的概念。它基本上将元素的 offset（）。top 与窗口顶部进行比较，并将 offset（）。top + height（）到窗口底部：

    Here is a quick and dirty concept. It basically compares the offset().top of the element to the top of the window, and the offset().top + height() to the bottom of the window:

    function getVisible() {    
        var $el = $('#foo'),
            scrollTop = $(this).scrollTop(),
            scrollBot = scrollTop + $(this).height(),
            elTop = $el.offset().top,
            elBottom = elTop + $el.outerHeight(),
            visibleTop = elTop < scrollTop ? scrollTop : elTop,
            visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
        $('#notification').text(visibleBottom - visibleTop);
    }
    
    $(window).on('scroll resize', getVisible);
    

    示例小提琴

    编辑 - 小型更新以在调整窗口大小时执行逻辑。

    edit - small update to also perform the logic when the window is being resized.

    这篇关于使用jQuery获取div的可见高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！