5

私は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は、同じケースで何度も私の希望を蹴散らしました。どうすればこれを修正できますか。

4

5 に答える 5

1

上記の方法を使用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/

それが役立つことを願っています!

于 2013-10-10T19:17:26.343 に答える
1

div のサイズが固定されていて、すべてのブラウザーで同じ位置に配置したい場合は、css float:left; を設定するだけで js 関数を呼び出す必要はありません。プロパティをすべての 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}
于 2013-10-10T13:14:32.420 に答える
0

スクロール機能により、スクロール時にdivが再レンダリング/再配置されるため、フレームがちらつきます。これを防ぐには、別の方法でディスプレイを作成することをお勧めします。

css と jquery ファイルが添付されたプレーンな html を使用しているように見えるので、問題を回避する方法は他にもたくさんあります。

最初の方法は、単にスクロール機能を削除することですが、必要ないように見えます。position:fixedスクロールするとdivがあなたに従うように修正します。

もう 1 つの方法は、任意のタイプのフレームワークを使用することです。これは、Kerry Liu がコメントで例を示したように CSSGrid ベースにすることも、どうしても必要な場合は html ベース (のように<frame>) にすることもできます。

スタイリングの要件がポジショニングよりも高い場合は、Jquery プラグインを使用すると、さらに役立つ可能性があります。

于 2013-10-04T10:09:46.880 に答える