logo标签列表

Internet Explorer 跳跃式滚动

javascriptjqueryinternet-explorerscroll
4
我有这段代码，可以将一个标题元素保持在另一个滚动元素的顶部。
在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>

3个回答
4
应该放在容器外面，而容器应该有一个20像素的margin-top，参见fiddle
 <div id="header">Header</div>
 <div id="container">
    <div id="main"></div>
 </div>
@Liam，由于jQueryUI的sortable函数，我无法更改HTML。请参见问题中更新的示例代码。 - Jamie Barker
3
我们能否更改可排序容器内部的HTML结构？我实在想让滚动条位于.main div旁边，这样它就在实际滚动的区域旁边了。
为了做到这一点，我创建了一个新的main-window类，将其高度设置为180px（200-20用于标题），将溢出从容器中移除，并从主要内容中删除了20像素的填充，看起来似乎可行： 

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

根据我提供的所有信息给出了很好的答案，点个赞（+1）。令人恼火的是，还有另一个小问题（/me 哭了一会儿）。标题不总是作为手柄使用，因为它们可以是 UI 元素（jQueryUI 滑块）而不是文本元素。不幸的是，如果你把手柄拿掉然后试着向下拖动滚动条，你会得到这个：http://jsfiddle.net/yod3s5vm/5/。 - Jamie Barker
很好。如果这个想法可行，那么将其发布为未来读者的答案。如果你卡住了，让我知道，我会进一步查看。 - Guy Schalnat
基本上我做了你建议的事情，但是将主窗口(main-window)作为句柄元素而不是容器(container)。由于其他很多依赖它的事情(如果我在问题中提到的话会很长)，所以配置花了一天时间。当我可以时，我会授予奖金(似乎无法从Android应用程序中这样做)。 - Jamie Barker
1
可以这样做。感谢解释。让用户知道你所做的事情似乎已经足够了，而且选择哪个容器来制作句柄更多是与可排序有关，而不是与滚动条有关，因此如果其他人正在尝试同时处理这两个问题，他们可以搜索可排序句柄，很可能已经找到答案了。没有必要再深入了解。此外，我确实学到了一些东西，所以很高兴我花时间回答了这个问题。 - Guy Schalnat
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接