Internet Explorer Jumpy滾動

Question

我有這樣的代碼來保持標題元素在滾動的另一個元素的頂部。

它在Firefox和谷歌瀏覽器中完美工作，但在IE瀏覽器中令人難以忍受。代碼本身非常簡單，我無法想象如何改進它。

在Chrome和Firefox中，標題始終始終位於頂部，但是在IE中它像一個拿着糖袋的小孩子一樣跳轉。

我不能因爲JQueryUIsortable功能我用

無論如何改變HTML佈局，下面的代碼：

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結構內部的排序容器？我真的很想在.main div裏面找到滾動條，所以它就在實際滾動的區域旁邊。

爲此，我創建了一個新的主窗口類，給它一個180px的高度（頭爲200 - 20），從容器中移動溢出，並從main中移除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應該有一個20像素的margin-top，看到fiddle

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

Answer 3

您可以使用position: fixed並且不要設置top屬性，以便它相對固定。

這樣的：

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