Internet Explorer Jumpy Scrolling

Question

我有这个代码来保持标题元素位于另一个滚动元素的顶部。

它在Firefox和Google Chrome中运行良好，但在IE浏览器中却非常令人难以置信。代码本身非常简单，我无法思考如何潜在地改进它。

在Chrome和Firefox中，标题始终处于最高位置，但是在IE浏览器中，它像一个抓住糖袋的小孩一样跳来跳去。

由于我正在使用的JQueryUI sortable功能，我无法更改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

标题应位于容器之外，而容器的边距应为20px，请参阅fiddle

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

Answer 2

我们可以在可排序容器中更改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 3

您可以使用position: fixed并且不要设置top属性，以便相对固定。

像这样：

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