如何在 HTML iFrame 中检测滚动条的存在（使用 Javascript）？

Posted 2023-03-05

【中文标题】如何在 HTML iFrame 中检测滚动条的存在（使用 Javascript）？

【英文标题】：How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?

【发布时间】：2010-10-15 10:19:12

【问题描述】：

我已经试过了：

        var vHeight = 0;
        if (document.all) 
          if (document.documentElement) 
            vHeight = document.documentElement.clientHeight;
           else 
            vHeight = document.body.clientHeight
          
     else 
      vHeight = window.innerHeight;
    

    if (document.body.offsetHeight > vHeight) 
      //when theres a scrollbar
    else
      //when theres not a scrollbar
    

我也试过了：

           this.scrollLeft=1;
    if (this.scrollLeft>0) 
        //when theres a scrollbar
        this.scrollLeft=0;
        else
        //when theres not a scrollbar
        return false;
    

没有成功..

我在 DOM Inspector 上搜索了 javascript 对象，但没有找到任何东西。

是否可以在 javacscript 的 iframe 中检测到滚动条的存在？

---

iframe 内容来自同一个域。

直到现在都没有成功..

alt text http://www.upvtp.com.br/file.php/1/help_key.jpg

【参考方案1】：

使用 jQuery，您可以比较文档高度、scrollTop 位置和视口高度，这可能会为您提供所需的答案。

类似的东西：

$(window).scroll(function()
  if(isMyStuffScrolling())
    //There is a scroll bar here!
  
); 

function isMyStuffScrolling() 
  var docHeight = $(document).height();
  var scroll    = $(window).height() + $(window).scrollTop();
  return (docHeight == scroll);
 

【讨论】：

感谢您的回答，但您的代码仅在我尝试移动滚动条时进行测试。我想在页面加载时对其进行测试。

很抱歉，但这不是正确的解决方案。 :( 您的代码实际上检查文档是否滚动到底部。这是一个证明：jsfiddle.net/vvdb0292/2。我认为 bobince 的答案是正确的。

【参考方案2】：

如果 iframe 内容来自另一个域，由于 JavaScript 安全限制，我认为无法做到这一点。

编辑： 在这种情况下，类似于给 iframe 一个 name='someframe' 和 id='someframe2' 然后比较 frames['someframe'].document.body.offsetWidth 与 document.getElementById('someframe2').offsetWidth应该会给你答案。

【讨论】：

iframe 内容来自同一个域。

【参考方案3】：

var root= document.compatMode=='BackCompat'? document.body : document.documentElement;
var isVerticalScrollbar= root.scrollHeight>root.clientHeight;
var isHorizontalScrollbar= root.scrollWidth>root.clientWidth;

这会检测滚动条是否需要。对于 iframe 的默认设置，这与是否存在 滚动条相同，但如果滚动条被强制打开或关闭（使用父文档中的 'scrolling="yes"/"no"' 属性，或 iframe 文档中的 CSS 'overflow: scroll/hidden'），那么这可能会有所不同。

【讨论】：

这应该是答案

为什么要测试“BackCompat”而不是在所有兼容模式下都使用documentElement？

@bab 当您处于 Quirks 模式（IE5 兼容）时，***文档滚动条位于 body 元素而不是 html 上。

为了更简单，您可以将 compatMode 检查替换为 var root = document.scrollingElement;

【参考方案4】：

我认为你的第二次尝试是在正确的轨道上。除了this，您应该尝试滚动/检查document.body。

【参考方案5】：

$(window).scroll(function()
  if(isMyStuffScrolling())
//scrolling
  else
//not scrolling

); 

function isMyStuffScrolling() 
  var docHeight = $(document).height();
  var scroll    = $(window).height() ;//+ $(window).scrollTop();
  if(docHeight > scroll) return true;
  else return false;

对 Jon 的 Winstanley 代码进行了一些改进

【参考方案6】：

我发现这适用于任何元素，至少在 Chrome 上：

hasVerticalScrollbar = (element.scrollHeight > element.offsetHeight)
        || 
(element.scrollHeight > element.clientHeight

使用Width 代替Height 可以检测到相同的水平滚动条。