如何使用 JavaScript 轻松找到页面上的点与浏览器窗口底部之间的距离？

发布于 2024-10-09 15:22:02 字数 276 浏览 10 评论 0原文

我的 Web 应用程序中的视图有一个可能非常长的表格，因此我将其包装在带有 overflow: auto; 的 div 中。 max-height: 400px; 这样用户就可以滚动它，同时保持页面上的其他控件可见。

我想使用一些 JavaScript 来动态调整 max-height CSS 属性，以便 div 拉伸到浏览器窗口的底部。我怎样才能确定这个值？ jQuery 解决方案很好。

该表格不是从页面顶部开始，因此我不能将高度设置为 100%。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏了南城 2024-10-16 15:22:02

我认为这样的事情会起作用：

var topOfDiv = $('#divID').offset().top;
var bottomOfVisibleWindow = $(window).height();
$('#divID').css('max-height', bottomOfVisibleWindow - topOfDiv - 100);

Something like this would work I think:

var topOfDiv = $('#divID').offset().top;
var bottomOfVisibleWindow = $(window).height();
$('#divID').css('max-height', bottomOfVisibleWindow - topOfDiv - 100);

回复收藏 0 原文

难如初 2024-10-16 15:22:02

我有一个非常相似的问题，除了在我的情况下，我有一个动态弹出元素（一个 jQuery UI 多选小部件），我想对其应用 max-height ，以便它永远不会低于页面底部。在目标元素上使用 offset().top 是不够的，因为它返回相对于文档的 x 坐标，而不是页面的垂直滚动位置。

因此，如果用户向下滚动页面，offset().top 将不会提供它们相对于窗口底部的准确描述 - 您需要确定页面的滚动位置。

var scrollPosition = $('body').scrollTop();
var elementOffset = $('#element').offset().top;
var elementDistance = (elementOffset - scrollPosition);
var windowHeight = $(window).height();
$('#element').css({'max-height': windowHeight - elementDistance});

I had a very similar problem, except in my case I had a dynamic pop-up element (a jQuery UI Multiselect widget), to which I wanted to apply a max-height so that it never went below the bottom of the page. Using offset().top on the target element wasn't enough, because that returns the x coordinate relative to the document, and not the vertical scroll-position of the page.

So if the user scrolls down the page, the offset().top won't provide an accurate description of where they are relative to the bottom of the window - you'll need to determine the scroll position of the page.

var scrollPosition = $('body').scrollTop();
var elementOffset = $('#element').offset().top;
var elementDistance = (elementOffset - scrollPosition);
var windowHeight = $(window).height();
$('#element').css({'max-height': windowHeight - elementDistance});

回复收藏 0 原文

一片旧的回忆 2024-10-16 15:22:02

window.innerHeight 为您提供整个窗口的可见高度。我最近做了一些几乎相同的事情，所以我很确定这就是您所需要的。 :) 不过请告诉我。

编辑：您仍然需要溢出 div 的 Y 值，可以通过 document.getElementById("some_div_id").offsetHeight 获取，看到 .style.top 不会给你一个结果，除非它已经通过CSS专门设置为一个点。 .offsetHeight 应该为您提供正确的“顶部”值。

然后只需将表格的大小设置为窗口高度，减去 div 的“顶部”值，再减去您想要的其他内容的任意摆动空间即可。

回复收藏 0 原文