它在Firefox和谷歌Chrome中运行得非常完美,但在IE浏览器中却非常令人难以置信.代码本身非常简单,我无法思考如何潜在地改进它.
在Chrome和Firefox中,标题始终处于最高位置,但是在IE中,它像一个抓住糖袋的小孩一样跳来跳去.
由于我正在使用的JQueryUI可排序功能,我无法更改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;
}最佳答案
我们可以在可排序容器中更改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;
}而且,除了滚动条现在位于标题下方并且标题现在一直延伸到下一个标题之外,应该可行.您可能会或可能不会进行一些样式清理,但滚动条现在就像您希望它们在没有JavaScript的情况下那样.
