2012-08-14 19 views
6

odaklanmak için kromların kaydırma yapmasını nasıl durdurabilirim Birbirlerinin arasında taşınabilen öğelerin koleksiyonları olan iki çoktan seçmeli listeye sahip olduğunuz bir denetim üzerinde çalışıyorum. Orada kendisi olmak öğeyi istiyorum birden içerikleri veya her iki liste daha geniş olacağı bir olasılık, ve bu yüzden onları her iki div ile temsil gibi seçkin sahipSeçkin bir

aşağıdaki gibidir:

<div class="container"> 
    <div class="concealer"> 
     <select size="4"> 
      ... 
     </select> 
    </div> 
</div> 

Seçimin div içine yerleştirilmesi yatay kaydırmaya izin verir (seçim yapmadığı için). Öğe, öğeler eklendikçe veya kaldırıldığında içeriğine sığacak şekilde yeniden boyutlandırılır (boyut özelliği ayarlanır). "Kapatıcı" div, çift kaydırma çubuklarının seçimdeki dikey kaydırma çubuğunu gizlemesinden kaçınır ve seçim de değiştiğinde dikey olarak boyutlandırılır.

html5 kullanıyorum. Standart modda IE9 ve Firefox iyidir. Yaşadığım sorun Chrome'la (aslında Safari'de olduğu gibi ... webkit). Denetim dikey kaydırma ile bir pencere veya kapsayıcıda (örneğin bir div) ise ve seçimin alt kısmı görünürse (veya isterse, seçimin en üstünü göremeyeceğiniz noktaya kaydırırsanız) dış kapta görünebilir, taşma görülebilirse), seçimdeki bir öğeye tıklandığında, seçimin odaklanmasına neden olduğunda, Chrome dış kabı en üstüne ya da yeterince uzağa kaydırır; Onu içeren divlarla görebiliyorsanız görünür.

Belirtildiği gibi, seçimdeki en alttaki seçenek (içeren) penceresinde görünürse, ancak seçimin üst kısmı görüntülenmezse, krom kaydırılır.

Ben bugünkü konumuna geri kaydırılan penceresinin scrollTop ayarlamak için komut dosyası yazdım ve benzerleri hariç olur eser, benim evreleme ve üretim ortamlarında, ayarlama krom tarafından yapılıyor olduğunu bulma yaşıyorum olması da olduğu gerçek seçenek seçiminin gerçekleşmesine neden olan AFTER, kendi ayarını yaptı, yani yanlış seçeneğin üzerine tıklama kaydeder (bu, tarayıcıya kadar kaydırılmış olsa da), seçiminde bir onfocus olayı olup olmadığı sorun olur.

Böyle bir barebone sınamasında gerçekleşmesi için seçenek seçme sorununu bulamadım, ancak kaydırma işlemi bir sorundur.

Bunun olmasını engellemek için bulduğum tek yol, seçkinin altını dış kabın tabanının dışına yerleştirecek kadar büyük olan bir sayıya çevirmektir, ancak bu hiç de ideal değildir , çok fazla boşluk bıraktığı için kötü bir kullanıcı deneyimi ve (oldukça derin olsa da) sadece webkit'i etkileyen bir sorunla mücadele ediyor.

Bu davranışı nasıl engelleyebileceğimi veya bunlara nasıl engel olabileceğimi bilen var mı?

Bununla başa çıkmak için resimlerim vardı, ancak anlaşılır şekilde yeni kullanıcılar resim gönderemiyor. Burada kolayca sorunu yeniden izin vermelidir bir js keman var: .. Ben bir çözüm var http://jsfiddle.net/4N9Kg/22/

cevap

3

(REDDİ: Bu bir geçici çözüm değil çözüm)

$('#sel').mousedown(function(e){ 
    $(e.target).attr('selected', 'selected'); //select the clicked <option> item 
    e.preventDefault(); 
}); 

DEMO

+0

Bu kesinlikle bazı tweaking kullanabileceğiniz bir şey (belki IE koparmak beri ala tarayıcı sniff), ama webkit'in kaydırma kapalı mücadele için çıplak asgari başarır. Seçimi bir geçiş olarak uygulama, ctrlKey için izin verme ve çoklu seçim işlevinin geri kalanını düzeltme, bu çözümü bir çözüm olarak adlandırabileceğiniz bir şey yapar. Seçimleri bir jquery eklentisi ile değiştirdim, ancak bu gerçekten çok güzeldi. Teşekkür ederim, Robin Maben. – Shapshank

İlgili konular