0

I have a plugin in which I provide a simple div container and the plugin creates all kinds of dom elemnents inside the container through javascript. The basic structure that the plugin creates is something like this:

Wrapper Div (Position:Relative)
   - Left Container (Position: Absolute)
        - Left Top sub-container (Position: Absolute)
   - Right Container (Position: Relative)
        - Right Top sub-container (Position: Absolute)
        - Right Sub-Container frame with absolute items (Position: Relative)

Here's the fiddle I have created for the exact same structure that the plugin creates : http://jsfiddle.net/FsYt8/

ここで私が直面している問題は、コンテンツがオーバーフローしたときに、マウス ホイールでコンテンツをスクロールできることです (フィドルのように)。ただし、下にスクロールすると、上の 2 つの上部の左右のサブコンテナー (赤/青のバー) の色がフィドルに表示され、コンテンツと共に下にスクロールしないようにします。

プラグインは div 内に dom 要素を作成container-right-frameし、要素を絶対位置に配置します (その後、container-rightの上/左に配置されます)。上記の 2 つのバーの固定された配置を実現するにはどうすればよいですか?

4

2 に答える 2

0

ヘッダーを固定し、それに応じて配置します。

http://jsfiddle.net/QYCra/

ヘッダーの下から始まるように、列の初期の高さを下に移動します。

.frame {width:924px;height:300px;position:relative;overflow-x:hidden;}
.axis-left {width:303px;height:34px;position:fixed; top:0; background-color:blue;z-index:2;}
.axis-right {width:615px;height:34px;position:fixed; top:0; left:310px; background-color:red;z-index:2;}
.container-left {height:340px;width:303px;top:30px; left:0px;position:absolute;background-color:green;z-index:1;overflow:hidden;}
.container-right {height:340px;width:615px;top:30px; left:304px;position:relative;overflow:hidden;background-color:yellow;z-index:1;}
于 2013-03-11T12:38:00.327 に答える
0

赤と青の DIV を固定して、左にフロートさせることができます。右の DIV の左マージンは、次のように DIV の x 軸の位置を調整します。

.frame {width:924px;height:300px;position:relative;overflow-x:hidden;}
.axis-left {float:left;width:303px;height:34px;position:fixed;background-color:blue;z-index:2;}
.axis-right {float:left;margin-left:305px;width:303px;height:34px;position:fixed;background-color:red;z-index:2;}
.container-left {height:340px;width:303px;left:0px;position:absolute;background-color:green;z-index:1;overflow:hidden;}
.container-right {height:340px;left:304px;position:relative;overflow:hidden;}
.container-right-frame{
    position:relative;top:34px;background-color:yellow;z-index:1;width:615px;
}
于 2013-03-11T12:52:29.577 に答える