获取滚动条在javascript中出现的高度

Get height at which scroll bars will appear in javascript

本文关键字：高度 滚动条 javascript 获取      更新时间：2023-09-26

有几种方法可以问这个问题:

  • 我怎么能得到的高度(以像素为单位)，在页面将开始有滚动条?换句话说，我如何获得滚动条将出现的窗口高度?

  • 我怎么能得到页面上所有元素的最大高度，没有相对高度(例如高度:100%)?

这个问题是相关的，但在相对高度的情况下，答案并不是我想要的:查找可以具有绝对定位元素的页面/文档内容的完整高度

我做了一个我正在谈论的js小提琴:http://tinyurl.com/kgf8dae。不幸的是，jsfiddle似乎打破了div e的相对高度-在普通浏览器中将其作为html页面运行，以查看实际行为

我可能误解了这个问题。一般来说，如果窗口的高度小于文档的高度，你会得到一个垂直的滚动条。

在jQuery中，check可能是这样的

if( $(document).height() > $(window).height() ){ /* There will be a scrollbar */ }

您可以在DOM更改和窗口大小调整事件中执行此检查，以确定是否出现了滚动条。预先确定一个事件是否会导致滚动条的出现可能会很棘手，并且可能需要对页面和潜在事件有一定的了解才能有效地处理。

这是通过jQuery标记的所以我将使用jQuery;即使在问题体中没有提到。

a)这听起来像你想要得到视窗(窗口)的高度;可以像这样检索:

var height = $(window).height();

如果文档(页面)的高度超过了窗口的高度，并且没有CSS属性阻止滚动条的显示，那么滚动条确实是可见的。

if( $(document).height() > $(window).height() )

b)这将是一个有点棘手，在某种意义上，唯一的方法离开我的头是查询每个DOM元素。这不是一个优雅的解决方案;和事实上，我要求你重新考虑你的方法，如果你真的必须这样做。也就是说. .好奇心…

如果你正在寻找最大的高度，在最大元素的意义上-那么这将工作:

// Get height of largest element.
var max_height = 0;
$('*').each( function(){
    // skip <html> and <body>
    if( ( $(this).get(0) == $('body').get(0) ) || ( $(this).get(0) == $('html').get(0) ) )
      return;
    var current_height = $(this).height();
    if( current_height > max_height )
      max_height = current_height;
});

例如，在这个页面上运行…

> console.log( max_height );
570

然而，我不确定你是否想要所有组合元素的最大高度…在这种情况下，我们显然需要将所有元素加起来，但有一个明显的问题:元素是嵌套的!

如果这是你想要的，那么通过使用.children()，我们可以迭代元素/body的直接子元素的长度。

// Get height of all combined elements
var combined_height = 0;
$('body').each( function(){  // replace with containing element?
    combined_height = combined_height + jQuery(this).height();
});

例如，在这个页面上运行:

> console.log(combined_height);
2176

使用您通过(jsfiddle.net/RMe3n/1)提供的示例中的HTML/CSS。答案永远都是242。

但是，我假设您正在寻找一种更动态的方法。在DOM就绪后运行以下命令也将生成242:

var answer = 0;
$('#absolutes > div').each(function(){
    var h = $(this).outerHeight(true);
    if(answer < h) answer = h;
})
alert(answer);

虽然上面的方法可以解决您提供的特定HTML/CSS，但它对页面的HTML结构和CSS做了很多假设。

是否有可能，你正试图解决的问题与JS可以解决在一个"更干净"的方式通过调整你的页面的HTML/CSS ?

如果你正在寻找一种防傻瓜的JS方法来解释现在存在的所有独特的布局/样式，并且可能存在更多的CSS3显示类型在未来被采用，我相信你不走运。没有值得推荐的、一致的、有效的方法来做到这一点。

注意:如果这不仅仅是一个理论讨论，考虑更具体地说明你所面临的确切场景，因为可能有一个截然不同的方法可以解决这个问题。

相关文章：