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

我可能在这里想的太简单了，但是没有定位：固定解决你的问题？

我担心没有好的解决方案，包括javascript。为了获得流畅的动画，Safari在处理javascript方面的速度还不够好。

下面你将找到解决问题的下一个最佳解决方案，仅使用css。

我将您的CSS编辑为以下内容：

.header{
    width:1000px;
    height:100px;
    background-color:#F2F2F2;
    position:fixed;
    top:0px;
    left:0px;
    z-index:10;
}
.left{
    height:1000px;
    width:100px;
    left:0px;
    position:fixed;
    top:100px;
    background-color:#CCC;
}
.right{
    height:1000px;
    width:100px;
    right:0px;
    position:fixed;
    top:100px;
    background-color:#CCC;
}
.footer{
    width:1000px;
    height:100px;
    background-color:#F2F2F2;
    position:fixed;
    left:0px;
    bottom:0px;
    z-index:10;
}
.static{
    height:1000px;
    width:1000px;
    position:relative;
}

我删除了所有的javascript。除此之外，没有任何改变。

请参阅fiddle

Answer 2

你可能会找这样的东西吗？ http://jsfiddle.net/sijav/8NL2S/12/
你必须转每position:fixed ... noo需要使用JQuery

Answer 3

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

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}

Answer 4

使用position:fixed上面建议的方式将内部div相对于窗口定位，而不是父div。如果你想把所有内容保存在.parent里面，请使用下面的CSS（不需要JS）：

.parent {
    position:relative;
    height:400px;
    width:800px;
    margin:0 auto;
    overflow:auto;
    border:1px solid #CCC;
}
.header, .footer {
    position:fixed;
    width: 800px; /* .parent width */
    height:100px;
    z-index:10;
    background-color:#F2F2F2;
}

.footer {
    margin-top: 300px; /* .parent hight - .footer hight */
}

.left, .right {
    position:fixed;
    width: 100px;
    height: 400px; /* .parent height */
    background-color:#CCC;
}

.right {
    margin-left: 700px; /* .parent width - .right width */
}

.static {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    height: 1000px;
}

这应该给出你试图在没有闪烁的情况下实现的布局和行为。你可以在下面试试。

http://jsfiddle.net/myajouri/VYmHv/1/

希望有所帮助！

Answer 5

由于滚动功能，滚动时div会重新渲染/重新定位，因此帧会闪烁。为了防止这种情况，您最好使用不同的方法来创建显示器。

由于您似乎使用附带css和jquery文件的普通html，还有许多其他方法可以解决您的问题。

第一种方法是简单地删除你的滚动功能，它看起来不像你需要它们。 position:fixed会修复它，以便滚动时你的div跟随你。

另一种方式是使用任何类型的框架。这可以是CSSGrid，因为Kerry Liu在评论中展示了一个例子，或者如果你绝望，它可以是基于html的（如<frame>）。

如果您对样式有更高的要求，那么定位可能还有一个Jquery插件可以帮助您进一步。

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

5 个答案: