2011-03-06 27 views
33

Aramamda bunun gibi birkaç soru gördüm, ancak soru doğru cevaplanmadı ya da yanıt verilmedi. Yani, tekrar soracağım.CSS taşma-y: görünür, taşma-x: kaydırma

<style> 
.parent { overflow-y:scroll; overflow-x:visible; width:100px; } 
.child { position:relative; } 
.child-menu { position:absolute; top:0px; left:-100px; display:inline-block; } 
</style> 

    <div class="parent"> 
    <!-- Lots of the following divs --> 
    <div class="child"> 
    Text Line 
    <div class="child-menu">some pop out stuff</div> 
    </div> 
</div> 

Tamam, bu sadece bir örnektir. Ama temel olarak, başarmaya çalıştığım şey .child sınıflarının y ekseninde kaydırılabilir olması ... yukarı ve aşağı kaydırma. Ama x eksenini istiyorum .... çocuk menüsünün .parent kapsayıcısının dışında görünmesi.

Bu mantıklı mı? Öyleyse, sayfa ortaya çıktığında tarayıcı, taşmayı otomatik olarak tamamen otomatik olarak algılıyor ve ayrı eksene saygı göstermiyor. Yanlış bir şey mi yapıyorum yoksa tarayıcılar bu konuda henüz CSS3 özelliklerine sahip değiller mi? Çoğunlukla sadece Chrome'da test edildi. enter image description here

cevap

28

Bunu çözdüm!

Üst öğe taşma olmalıdır: auto; .child şu konumda olmalıdır: göreli; .child menüsü şu konumda olmalıdır: sabit; NO üst veya sol konumlandırma ile. Bunu yaparsanız, içeriği içeriğiyle koruyacaktır.

Çocuk menüsünü hareket ettirmeniz gerekiyorsa, kenar boşluklarını kullanın ve üstte veya solda değil. Örnek kenar boşluğu: -100px;

+0

bu işe gelmez? Görünüşe göre kaydırma kaydırma .child değil, .child-menu. Bu durumda, o zaman bu makul bir çözüm gibi görünmüyor. – dchapman

+1

Biliyorsun, hatırlayamıyorum. Doğru olduğunu hayal ediyorum. Bunu kullandığım zamanlar, bunun sorun olmadığı tek sayfalık uygulamalar içindi. Makul? Başka bir cevap yok, bu yüzden bu işlevselliğe ihtiyaç duyanlar için evet çok mantıklı. Kaydettiğinizde div'u her zaman taşıyabilirsiniz. –

+10

Gelecekte bu cevabı görürse kimseye zaman kazandırmak için bu *, kenar çubuğunun kaydırılması sırasında popout'un kaydırmasına * neden olmaz. Dolayısıyla, böyle bir şey kullanırsanız, kaydırmayı izlemek için JS'yi kullanmanız gerekir. – Andrew

İlgili konular