iOS Safari

Question

'da alttaki div'in kaymasını önlemek için% 100 yükseklik,% 70 viewport yüksekliği ve overflow:scroll olan bir div var.

Şimdi, div yerine tüm sayfayı kaydırmak için dokunma aygıtlarının kullanabileceği bir div overlaying oluşturmak istiyorum.

Ben position:absolute ve tam sayfa yüksekliğe sahip bir div yarattı. Android kullanıcıları bu div'u sürüklerse, tüm sayfa beklendiği gibi kaydırılır. Bununla birlikte, iOS7'de, dokunmatik olay div ile sağa giderse, temeldeki div kaydırılır. Eğer kaydırma div üzerinde sayfa div tarihinde -iOS7 ve sürükle kullanırsanız

.scrollDiv{ 
    width:100%; 
    height:200px; 
    overflow-y:scroll; 
    border:solid 1px #f00; 
    -webkit-overflow-scrolling: touch; 
} 
.pageScroller{ 
    position:absolute; 
    right:0; 
    top:0; 
    bottom:0; 
    width:50%; 
    background-color: rgba(0,0,0,0.7); 
} 

JSFiddle

, kaydırma div yerine sayfanın kaydırılır.

Bunun için bir çözüm bilen var mı?

Answer 1

.pageScroller kaydırma elemanı öğenizde,ve -webkit-overflow-scrolling: touch; özniteliklerini z-index numaralı bir postayla birlikte ekleyin. Bu, kaydırma eyleminin altındaki "katmana" ulaşmasını engeller.

.pageScroller{ 
    position:absolute; 
    right:0; 
    top:0; 
    bottom:0; 
    width:50%; 
    z-index: 1; 
    background-color: rgba(0,0,0,0.7); 
    overflow-y:scroll; 
    -webkit-overflow-scrolling: touch; 
} 

Kontrol Bu JSfiddle: http://jsfiddle.net/R9Ut6/