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:

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

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

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

显然,我的数字不会像这个演示中那样一致和清晰,或者我只需要对这些数字进行硬编码.

I have a bit of a theory:

  • 获取窗口的高度
  • Get the height of the div
  • 获取div相对于窗口顶部的初始偏移量
  • 在用户滚动时获取偏移量.

这看起来很简单,但我就是想不起来.明天早上我要再喝一杯;我只是想你们中的一些天才也许能帮上忙.

Thanks!

更新:这是我自己想出来的,但是看起来下面的答案中的一个更优雅,所以我将改用它.对于好奇的人,我想出了以下几点:

$(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()与窗口的底部进行比较:

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(`Visible height of div: ${visibleBottom - visibleTop}px`);
}

$(window).on('scroll resize', getVisible).trigger('scroll');
html,
body {
  margin: 100px 0;
}

#foo {
  height: 1000px;
  background-color: #C00;
  width: 200px;
  margin: 0 auto;
}

#notification {
  position: fixed;
  top: 0;
  left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="foo"></div>
<div id="notification"></div>

The logic can be made more succinct if necessary, I've just declared separate variables for this example to make the calculation as clear as I can.

Jquery相关问答推荐

如何在html css中制作响应表

使用jquery ui来回滑动切换

更改后如何使用 jQuery Select CSS 类

在 Mastodon 中将 jQuery 添加到 Rails 6

如何在没有实体框架的情况下在 ASP.NET 上使用 ajax 和 jquery 从列表创建数据表

确定元素是否是其父元素的最后一个子元素

如何使用 jQuery 清空输入值?

如何在jQuery中 Select 具有特定ID的所有元素?

jQuery/JavaScript 碰撞检测

Select select2后触发动作

在不使用提交按钮的情况下触发标准 HTML5 验证(表单)?

jQuery .load() 调用不会在加载的 HTML 文件中执行 JavaScript

jQuery Uncaught TypeError: 对象 [object Window] 的属性$不是函数

如何通过jQuery函数仅获取直接子元素

如何使用jQuery触发类更改事件?

jquery更改div类的样式属性

使用 jQuery 将事件侦听器添加到动态添加的元素

使用 JQuery 的黄色淡入淡出效果

为什么要定义一个匿名函数并将 jQuery 作为参数传递给它?

jquery - 成功时使用ajax结果返回值