İOS'ta CSS taşması ile kaydırma çubuğu nasıl elde edilir

Bir iPad web sitesi geliştirme overflow: autoa'da gerekirse kaydırma çubuklarını almak için CSS özelliğini kullanmaya çalıştım div, ancak cihazım iki parmak kaydırma çalışsa bile bunları göstermeyi reddediyor.

Denedim

overflow: auto;

ve

overflow: scroll;

ve sonuç aynı.

Sadece bir iPad'de test ediyorum (masaüstü tarayıcılarda mükemmel çalışıyor).

Herhangi bir fikir?

Düzen tarafından nazikçe, sol yorumun aşağıdaki kritzikratzi :

İos 5beta ile [Başlangıç] -webkit-overflow-scrolling: touchbeklenen davranışla sonuçlanması gereken yeni bir özellik eklenebilir.

Bazıları, ancak çok az, daha fazla okuma:

• İOS 5'te yerel momentum kaydırma

Orijinal cevap , gelecek nesillere bırakıldı.

Ne yazık ki , görünüşe göre bu tür yararlı mekanizmaları kaplayacak olan ekran genişliği nedeniyle, iOS cihazlarında kaydırma çubukları üretmiyor overflow: autoveya scrollüretmiyor.

Bunun yerine, sizin de bulduğunuz gibi, kullanıcıların overflowiçerikte gezinmek için iki parmakla kaydırması gerekir . Tek referans, telefonun kılavuzunu bulamadığım için burada bulabildiğim: tuaw.com: iPhone 101: İki parmakla kaydırma .

Bunun için düşünebildiğim tek çözüm, overflowöğeler için kendi kaydırma çubuklarınızı oluşturmak için muhtemelen biraz JavaScript ve belki jQTouch kullanıp kullanamayacağınızdır . Alternatif olarak , içeriği kaldırmak ve içeriği tam olarak göstermek için @media sorgularını kullanabilirsiniz overflow, bir iPhone kullanıcısı olarak, yalnızca basitlik için de olsa, bu benim oyumu alır. Örneğin:

<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />

Yukarıdaki kod , yukarıda bağlantılı aynı makaleden ayrı olarak A Listesinden geliyor (neden ondan ayrıldıklarından emin değilim type="text/css", ancak nedenleri olduğunu varsayıyorum.

Bu kodu css'nize uygulayın

::-webkit-scrollbar{

    -webkit-appearance: none;
    width: 7px;

}

::-webkit-scrollbar-thumb {

    border-radius: 4px;
    background-color: rgba(0,0,0,.5); 
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Kaydırma çubuklarının çalışmasını yeniden tanımlamak için bazı testler yaptım ve CSS3 kullandım ve siz Overflow:scroll;veyaOverflow:auto

Böyle bir şeyle sonuçlandım ...

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
    border-bottom: 1px solid #eee; 
    border-top: 1px solid #eee;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); 
} 

Henüz çözemediğim tek olumsuz taraf, iProducts üzerindeki kaydırma çubuklarıyla nasıl etkileşimde bulunulacağıdır, ancak içeriği kaydırmak için içerikle etkileşime girebilirsiniz.

Chris Barr tarafından verilen çözüm burada

function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

function touchScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollTop+event.touches[0].pageY;
            event.preventDefault();
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollTop=scrollStartPos-event.touches[0].pageY;
            event.preventDefault();
        },false);
    }
}

Benim için iyi çalışıyor. Birkaç tıklama kullanmanız gerekiyorsa event.preventDefault'u kaldırın ...

İScroll4 javascript kütüphanesi çalışma, burayı çözecektir. Kaydırma çubuğunun kaybolmasını önlemek için hideScrollbarayarlayabileceğiniz bir yöntemi vardır false.

SO'daki diğer 2 kişi, soruna yalnızca CSS'ye yönelik olası bir çözüm önerdi. David Thomas'ın çözümü mükemmel, ancak kaydırma çubuğunun yalnızca kaydırma sırasında görünme sınırı var.

Kaydırma çubuklarının her zaman görünür olması için, aşağıdaki bağlantılarda önerilen yönergeleri takip etmek mümkündür:

• WebKit / Blink'te OS X izleme paneli kullanıcıları için kaydırma çubuklarının gizlenmesini nasıl önleyebilirim?
• CSS - Taşma: Kaydırma; - Her zaman dikey kaydırma çubuğu gösterilsin mi?

vücudunuzun ve div'lerinizin

  position:fixed

aksi takdirde işe yaramaz

Tecrübelerime göre, öğenin çalışması display:block;için başvurduğundan emin olmanız gerekir -webkit-overflow-scrolling:touch;.

Benim için iyi çalışıyor, lütfen deneyin:

.scroll-container {
  max-height: 250px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

Bu kodu kullanın, ios / android APP web görünümünde çalışır; Taşınabilir olmayan bazı css kodunu siler;

Mobil cihazda dokunarak yatay divkaydırmayı gerçekleştirmeye çalışıyorsanız , güncellenmiş CSS düzeltmesi çalışmaz (Android Chrome ve iOS Safari'nin çoklu sürümlerinde test edilmiştir), örneğin:

-webkit-overflow-scrolling: touch

Bir çözüm buldum ve CSS numarasından önce yatay kaydırma için değiştirdim. Bunu Android Chrome ve iOS Safari'de test ettim ve dinleyici dokunma olayları uzun süredir var, bu yüzden iyi bir desteğe sahip: http://caniuse.com/#feat=touch .

Kullanım:

touchHorizScroll('divIDtoScroll');

Fonksiyonlar:

function touchHorizScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollLeft+event.touches[0].pageX;              
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollLeft=scrollStartPos-event.touches[0].pageX;              
        },false);
    }
}
function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}  

Dikey çözümden değiştirildi (CSS öncesi hile):

http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/