Geek Answers Handbook

Scrolling Internet Explorer

I have this code to save a title element at the top of another element that scrolls.

It works great in Firefox and Google Chrome, however in IE it is painfully nervous. The code itself is very simple, and I can’t think of how to improve it.

In Chrome and Firefox, the headline sits at the top all the time, but in IE it jumps like a little kid who takes out a bag of sugar.

I can’t change the HTML layout due to the JQueryUI sortable function that I use

Anyway, here is the code:

http://jsfiddle.net/0va4dn0q/8/

 $('.container').scroll( function() { var fromTop = $(this).scrollTop(), Header = $(this).find('.header'); Header.css('margin-top', fromTop + 'px'); }); $('.sortable').sortable({ connectWith: '.sortable', placeholder: 'ui-state-highlight' }); 
 div { width:300px; } .sortable { float:left; margin:3px solid red; min-height:200px; } .container { height:200px; overflow-x:hidden; overflow-y:auto; position:relative; cursor:move; } .header { position:absolute; top:0; background-color:orange; height:20px; text-align:center; line-height:20px; } .main { padding-top:20px; color:white; background-color:black; height:1000px; } .ui-state-highlight { height:200px; } 
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div class="sortable"> <div class="container"> <div class="header">Header 1</div> <div class="main">hello<br/>hello<br/>hello<br/></div> </div> <div class="container"> <div class="header">Header 2</div> <div class="main">bye<br/>bye<br/>bye<br/></div> </div> </div> <div class="sortable"> <div class="container"> <div class="header">Header 3</div> <div class="main">splurge<br/>splurge<br/>splurge<br/></div> </div> <div class="container"> <div class="header">Header 4</div> <div class="main">lorem ipsum<br/>dolor<br/>sit<br/></div> </div> </div>
+5
source share
3 answers

Can we change the HTML INSIDE structure for a sortable container? I really want to get the scrollbar inside div.main, so it is next to the area that actually scrolls.

To do this, I created a new main window class, gave it a height of 180 pixels (200 - 20 for the title), moved the overflow from the container and removed the 20px add-on from the main one, and it seemed to work

 $('.sortable').sortable({ handle: '.header', connectWith: '.sortable', placeholder: 'ui-state-highlight' }); 
 div { width:300px; } .sortable { float:left; margin:3px solid red; min-height:200px; } .container { height:200px; overflow-x:hidden; position:relative; } .main-window { height:180px; overflow-x:hidden; overflow-y:scroll; } .header { cursor:move; background-color:orange; height:20px; text-align:center; line-height:20px; } .main { color:white; background-color:black; height:1000px; } .ui-state-highlight { height:200px; } 
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div class="sortable"> <div class="container"> <div class="header">Header 1</div> <div class="main-window"> <div class="main">hello<br/>hello<br/>hello<br/></div> </div> </div> <div class="container"> <div class="header">Header 2</div> <div class="main-window"> <div class="main">bye<br/>bye<br/>bye<br/></div> </div> </div> </div> <div class="sortable"> <div class="container"> <div class="header">Header 3</div> <div class="main-window"> <div class="main">splurge<br/>splurge<br/>splurge<br/></div> </div> </div> <div class="container"> <div class="header">Header 4</div> <div class="main-window"> <div class="main">lorem ipsum<br/>dolor<br/>sit<br/></div> </div> </div> </div>

And besides the fact that the scrollbars are now below the headers, and the headers are now distributed until the next, they should work. You may or may not have some kind of stylish cleanup, but now the scrollbars act as if you want them without JavaScript.

+4
source

The header should be outside the container, while the container should have a margin-top 20px, see fiddle

  <div id="header">Header</div> <div id="container"> <div id="main"></div> </div>
+5
source

You can simply use position: fixed and not set the top property so that it is fixed relatively.

like this:

https://jsfiddle.net/0va4dn0q/42/

+1
source

More articles:


All Articles