CODEWITHSUNDEEP
javascriptjqueryhtml
user1834809
user1834809

Reputation: 1311

how to prevent scrolling on other element bound to the same container?

sorry if the context already exists in other SO thread. I didnt found anyone, so I am posting it.

I have two elements(tabs) in the container(body) both are overflowing. when I try to scroll one tab, the hidden tab content also scrolling. I think, this is because both elements bound to the window.

 <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

How to prevent scrolling on hidden element?

Upvotes: 0

Views: 231

Answers (2)

kongaraju
kongaraju

Reputation: 9596

Here is a working demo, the solution is come up with setting both ends fixed and scrolling content. This should give effect like bound to the container.

.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/

Upvotes: 1

Joris Kroos
Joris Kroos

Reputation: 451

Bascially you didnt set the height of your tabs, and neither did you apply an overflow to it. Doing that would solve the issue.

If you prefer to have the tabs 100% height, you would need a div within a div. In the outer div set your 100% height, in the inner div set a top padding of the height of the tab-selection.

Like this:

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

With css

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

Upvotes: 1

Related Questions