Internet Explorer Jumpy Scrolling

Question

Ho questo codice per mantenere un elemento di titolo nella parte superiore di un altro elemento che scorre.

Funziona perfettamente in Firefox e Google Chrome, tuttavia in IE è estremamente strambo. Il codice stesso è molto semplice e non riesco a pensare a come migliorarlo potenzialmente.

In Chrome e Firefox l'intestazione si trova in cima sempre in modo permanente, tuttavia in IE salta intorno come un bambino piccolo che ha afferrato il sacchetto di zucchero.

non posso cambiare il layout HTML a causa della funzionalità JQueryUIsortable sto usando

Comunque, ecco il codice:

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>

Answer 1

Possiamo cambiare la struttura HTML all'interno del contenitore ordinabile? Voglio davvero ottenere la barra di scorrimento all'interno di .main div, quindi è vicino all'area che scorre effettivamente.

Per fare ciò, ho creato una nuova classe di finestra principale, l'ho resa un'altezza di 180 px (200-20 per l'intestazione), spostato l'overflow dal contenitore e rimosso il riempimento da 20px da main, e sembrava lavoro:

$('.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>

e, oltre al fatto che le barre di scorrimento sono ora sotto le intestazioni e le intestazioni ora si estendono fino a quello successivo, dovrebbe funzionare. Si può o non si può fare una pulizia di stile, ma le barre di scorrimento ora funzionano come si desidera senza JavaScript.

Answer 2

L'intestazione dovrebbe essere al di fuori del contenitore, mentre il con TAINER dovrebbe avere un margin-top di 20px, vedere fiddle

<div id="header">Header</div> 
<div id="container"> 
    <div id="main"></div> 
</div> 

Answer 3

È possibile utilizzare solo position: fixed e non impostare la proprietà top in modo che sia fissa relativamente.

come questo:

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