Internet Explorer Jumpy Scrolling

Question

Mam ten kod, aby zachować element nagłówka u góry innego elementu, który przewija.

Działa doskonale w przeglądarkach Firefox i Google Chrome, jednak w IE jest niesamowicie wzbierająco. Sam kod jest bardzo prosty i nie mogę myśleć, jak go poprawić.

W przeglądarce Chrome i Firefox nagłówek jest stale na stałe przez cały czas, jednak w IE skacze jak małe dziecko, które złapało torbę z cukrem.

nie mogę zmienić układ HTML z powodu funkcjonalności JQueryUIsortable Używam

W każdym razie, oto kod:

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

możemy zmienić strukturę HTML WEWNĄTRZ sortable pojemniku? Naprawdę chcę uzyskać pasek przewijania wewnątrz głównego pliku div, więc znajduje się on obok obszaru, który faktycznie się przewija.

W tym celu utworzyłem nową klasę okna głównego, nadałem jej wysokość 180 pikseli (200 - 20 dla nagłówka), przeniosłem przelew z pojemnika i usunąłem obicie o wielkości 20 pikseli od strony głównej, i wydawało się, że praca:

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

a poza tym, że paski przewijania są obecnie poniżej nagłówków i nagłówki teraz rozszerzyć aż do następnego, powinno działać. Możesz, ale nie musisz, oczyścić stylizację, ale paski przewijania działają teraz tak, jak chcesz, bez JavaScript.

Answer 2

Nagłówek powinien znajdować się poza kontenerem, a con tainer powinien mieć margin-top o 20 pikseli, zobacz fiddle

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

Answer 3

Można po prostu użyć position: fixed i nie ustawiać właściwości top, aby była względnie poprawiona.

tak:

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