在Div内部滚动时,DIV会在固定时将其闪烁

Question

我有4个DIV,我正在改变滚动的4个元素的位置,如下所示

 function adjustPositions(e) {
    var div = e ? $(this) : $('.parent');
    div.find('.left').css({
      left: div.scrollLeft() + "px"
    });
    var right = div.find('.right');
    right.css({
       left: div.scrollLeft() + div.width() - right.width() + "px"
    });
    div.find('.header').css({
       top: div.scrollTop() + "px"
    });
    var bottom = div.find('.footer');
    bottom.css({
      top: div.scrollTop() + div.height() - bottom.height() + "px"
    });
 }
 adjustPositions();
 $('.parent').on('scroll', adjustPositions);

这是小提琴http://jsfiddle.net/8NL2S/5/,当我在Safari中测试它时,它会闪烁.没什么好看的.Safari多次在同样的情况下踢了我的希望.我怎样才能解决这个问题.

Answer 1

如果您的 div 大小是固定的，并且您希望在所有浏览器中处于相同位置，则无需调用 js 函数，只需设置 css float:left; 属性与所有 div 并在该 4 div 的外部 div 上使用 cf 类。例子是：

HTML:

<div class="parent">
    <div class="static cf">
        <div class="left"></div>
        <div class="right"></div>
        <div class="header"></div>
        <div class="footer"></div>
    </div>
</div>

CSS:


.header{
    border:1px solid red;
    width:100px;
    height:100px;
    background-color:#F2F2F2;
    float:left;
    top:0px;
    left:0px;
    z-index:10;
}
.left{
    border:1px solid red;
    height:100px;
    width:100px;
    left:0px;
    float:left;
    top:100px;
    background-color:#CCC;
}
.right{
    border:1px solid red;
    height:100px;
    width:100px;
    right:0px;
    float:left;
    top:100px;
    background-color:#CCC;
}
.footer{
    border:1px solid red;
    width:100px;
    height:100px;
    background-color:#F2F2F2;
    float:left;
    left:0px;
    bottom:0px;
    z-index:10;
}
.static{
    height:105px;
    width:410px;
    position:relative;
}
.cf{clear:both}