Question

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

我已经尝试过：

        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 objets ，但没有找到任何内容。

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

iframe内容来自同一个域。

直到现在都没有成功..

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

Answer 1

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

这会检测滚动条是否有 need 。对于iframe的默认值，这与是滚动条是否相同，但是如果强制滚动条打开或关闭（使用父文档中的'scrolling =“yes”/“no”'属性），或者iframe文档中的CSS'overflow：scroll / hidden'，那么这可能会有所不同。

Answer 2

使用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);
}

Answer 3

$(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代码

Answer 4

如果由于JavaScript安全限制而导致iframe内容来自其他域，我认为无法做到这一点。

编辑：在这种情况下，为iframe提供一个名称='someframe'和id ='someframe2'然后比较frame ['someframe']。document.body.offsetWidth与document.getElementById（'someframe2'）。offsetWidth应该给你答案。

Answer 5

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

Answer 6

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

{% capture title_tag %}
  {{ course.title }} with
  {{ course.teachers.map { |t| t.name }.join(', ') }}
{% endcapture %}

可以使用Child { constructor (props){ super(props) this.state = { data: this.props.data } } render (){ if (this.props.data != this.state.data){ this.setState({data : this.props.data}) //update data from parent if they are different } return ( <Text>{this.state.data}</Text> ) } } Parent { constructor (props){ super(props) this.state = { data: 'new string' } } render (){ return ( <Child data = {this.state.data}/> ) } }代替hasVerticalScrollbar = (element.scrollHeight > element.offsetHeight) || (element.scrollHeight > element.clientHeight检测水平滚动条。

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

6 个答案: