2012-04-10 47 views
12

sorumu vurgulayan bir resim ve potansiyel bir çözüm için aşağıdaki yazıyı bakınız:CSS: taşma-y: kaydırma; taşma-x: görünür

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?

+0

Bu bir hata değildir: 'position: fixed' her zaman bir öğeyi en yakın' position: relative' container'a değil, viewport'a göre konumlandırır. Ayrıca, bağlantı kuracağınız soru hakkında garip bir şey var: başlık, verilen kodla uyumlu değil (aynı zamanda * 'overflow-y: kaydırma; overflow-x: visible'!) Ve neden olduğunu anlayamıyorum kendi kendine cevap "konum: sabit" kullanmak diyor. – BoltClock

+0

Evet; Sanırım bu yazının başlığı bir yazım hatası. Ben “pozisyon: sabit” '' '' '' '' '' '' '' '' '' '' '• '' deyimi bozuk '' demektedir, ancak daha çok başvurulan yazıdaki çözüm buggy'dir (çünkü, 'position: fixed;' tam olarak tanımladığınız gibi davranır) – Chuck

cevap

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.

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/

+0

Ne yazık ki, araç ipucunun dışarıdan gösterilmesini isterim ana kaydırma bölmesinin. Pozisyon mutlakı, içine taşacak, çünkü taşma-y kaydırma yapacak şekilde ayarlanmış. – Chuck

+0

Taşma-yınız kaydırmadır. Araç ipucunu saklayacaktır. Kaydırma en yüksek z-dizinine sahip olduğu için. – Jashwant

+0

Bu doğru değil; Gönderdiğim orijinal JSFiddle'a bakarsanız, araç ipucu kaydırma çubuğunun önünde 'position: fixed (sabit) ',' position: fixed '() ile olabilir, ancak' position: mutute; 'ile viewport'un içine kırpılır, bu da tamamen başka bir sorundur. – Chuck

İlgili konular