Question

抱歉，如果上下文已存在于其他SO线程中。我没找到任何人，所以我发布了它。

我在容器（主体）中有两个元素（制表符）都溢出。当我尝试滚动一个选项卡时，隐藏的选项卡内容也会滚动。我想，这是因为两个元素绑定到窗口。

 <div class="header">
    <ul>
      <li data-tabid="tab1" class="tab">Tab1</li>
      <li data-tabid="tab2" class="tab">Tab2</li>
    </ul>
  </div>
    <div class="tabContainer">
       <div class="tab1 tabpanel">
         <!-- overflowing content -->
       </div>
       <div class="tab2 tabpanel">
         <!-- overflowing content -->
       </div>


    </div>

CSS

body{
  height:100%;
  overflow-x:auto;
  }
.header{
  position:fixed;
  top:0px;
  height:50px;
}
.tabpanel{
  position:absolute;
  top:50px;

}

Demo

如何防止在隐藏元素上滚动？

Answer 1

基本上你没有设置标签的高度，也没有对它应用溢出。这样做可以解决问题。

如果您希望选项卡的高度为100％，则需要div中的div。在外部div设置你的100％高度，在内部div中设置一个顶部填充选项卡的高度。

像这样：

<div class="tab">
  <div class="inner">
    * tab content *
  </div>
</div>

用css

.tab { height:100%; }
.inner { margin-top:20px; overflow:auto; }

Answer 2

这是一个工作演示，解决方案是设置固定和滚动内容的两端。这应该会产生绑定到容器的效果。

.tabpanel{
  position:absolute;
  top:0px;
    bottom:0px;
  display:none;
    min-height:100%;
    height:auto;
    width:100%;
    overflow:auto;
}

.tabpanel .inner{
 width:100%;
height:150%;
margin-top:60px;    
}

http://jsfiddle.net/kongaraju/P6XWH/2/

如何防止在绑定到同一容器的其他元素上滚动？

2 个答案: