Internet Explorer Jumpy Scrolling

Question

У меня есть этот код, чтобы сохранить элемент заголовка в верхней части другого элемента, который прокручивается.

Он отлично работает в Firefox и Google Chrome, однако в IE он мучительно нервничает. Сам код очень прост, и я не могу думать, как его улучшить.

В Chrome и Firefox заголовок сидит наверху постоянно все время, однако в IE он прыгает, как маленький ребенок, который достал мешок с сахаром.

Я не могу изменить макет HTML из-за функциональности JQueryUIsortable Я использую

Во всяком случае, вот код:

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

Можем ли мы изменить структуру HTML ВНУТРИ сортируемого контейнера? Я действительно хочу получить полосу прокрутки внутри div .main, поэтому она находится рядом с областью, которая фактически прокручивается.

Для этого я создал новый класс главного окна, дал ему высоту 180 пикселей (200 - 20 для заголовка), переместил переполнение из контейнера и удалил 20px отступы от основного, и казалось, что работа:

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

и, кроме того, что полосы прокрутки находятся в настоящее время под заголовками и заголовки в настоящее время расширить весь путь к следующему, должен работать. У вас может быть или не может быть какая-то стильная очистка, но полоски прокрутки теперь действуют так, как будто вы хотите, чтобы они без JavaScript.

Answer 2

Заголовок должен находиться вне контейнера, тогда как con TAINER должны иметь запас-верх 20px см fiddle

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

Answer 3

Вы можете использовать position: fixed и не устанавливать свойство top так, чтобы оно было зафиксировано относительно.

так:

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