CSS: taşma-y: kaydırma; taşma-x: görünür

Question

sorumu vurgulayan bir resim ve potansiyel bir çözüm için aşağıdaki yazıyı bakınız:

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

Ancak bu strateji sonları zaman aslında kaydırma çubuğunu hareket ettirin. Önerilen uygulamada (position: fixed;), araç ipuçları, ön satır kaydırma konumundayken çocuk div'in yanında görüntülenir. Böylece, yeni çocuk bölümlerini görüntülediğinizde, araç ipuçları sayfanın alt kısmına düşmeye başlar. http://jsfiddle.net/narcV/4/

Ben ipuçları hale nasıl herhangi bir fikir her zaman çocuk div yanında görüntülemek:

hata bir demo için buraya bakınız?

Answer 1

ben this question den getPos işlevini kullanarak, bu kullanarak javascript uygulanması sona erdi.

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); 
} 

Temelde, sayfadaki düğüm şu anda (hesaba kaydırma pozisyon alarak) görüntülenir ve el ile doğru yerde ipucunu yerleştirmek nereye hesaplamak: gibi

son ürünü görünüyor sayfa.

Çok kötü, bunu yapmak için zarif/CSS yolu yok, ama en azından bu işe yarıyor.

Answer 2

position:fixed yerine position:absolute kullanmalısınız.

.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; } 

Fiddle demo, http://jsfiddle.net/68fBE/2/