CSS：overflow-y：scroll;オーバーフロー-X：目に見える

Question

私の質問や潜在的な解決策を強調した画像については、以下の記事を参照してください。

CSS overflow-y:visible, overflow-x:scroll

しかし、この戦略ブレークあなたが実際にスクロールバーを移動するとき。提案された実装（position: fixed;）では、ツールチップは子divの横にその位置のプレスクロールで表示されます。したがって、新しいchild-divをスクロールして表示すると、ツールチップがページの一番下に落ちるようになります。

は、バグのデモは、ここを参照してください：http://jsfiddle.net/narcV/4/

任意のアイデア私は、ツールチップは、すべての回での子のdivの横に表示することができますか？

Answer 1

私はthis questionからgetPos機能を使って、この使用してJavaScriptを実装することになりました。ページ上のノードが現在（アカウントにスクロールバーの位置を取って）表示され、手動で適切な場所にツールチップを置く場所を基本的に、私は計算

var scrollPanel = ...; 
var tooltip = ...; 
function nodeHovered(e) { 
    var hovered = e.srcElement; 
    var pos = getPos(hovered); 
    pos.x += hovered.offsetWidth; 
    pos.y -= scrollPanel.scrollTop; 
    tooltip.style.setProperty('left', pos.x); 
    tooltip.style.setProperty('top', pos.y); 
} 

：

最終製品は次のようになりますページ。

これを行うエレガントな/ CSSの方法はありませんが、少なくともこれは機能します。

Answer 2

position:fixedの代わりにposition:absoluteを使用してください。

.parent { overflow-y:scroll; width:100%; height:100px; } 
.child { position:relative; } 
.child .child-menu { position: absolute; left: 80px;width:200px; top:0px; border: 1px solid black; background-color: green; display: none; } 
.child:hover .child-menu { display: block; } 

フィドルのデモ、 http://jsfiddle.net/68fBE/2/