Necesito ayuda , os comento , estoy haciendo una aplicación donde necesito utilizar "-webkit-overflow-scrolling: touch" en varias vistas, el problema es el siguiente:
Cuando hago scroll y pulso el boton para cambiar la vista a otra pagina, primero me para el scroll y despues tengo que volver a pulsar para cambiar la vista.
Resumiendo que no me dejo cambiar la vista mientras el scroll esta funcionando
Encontre esta solución: Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging pero no logro hacerlo funcionar.
Alguna idea de porque hace eso, yo no consigo dar con la solución.
Mi HTML:
<div id="index" style="display: block;">
<div class="headerpage">
<div class="header_left">
</div>
<div class="header_right">
</div>
</div>
<div id="bodyindex" class="scroll">
<ul>
<li>
<div class="img_ad"></div>
<div class="info_ad">
<p>Apple Watch Negro<br>250€<spam> . Hace 2h a 1 km de ti</spam></p>
</div>
</li>
<li>
<div class="img_ad"></div>
<div class="info_ad">
<p>Iphone 6s plus Negro<br>550€<spam> . Hace 2h a 1 km de ti</spam></p>
</div>
</li>
<li>
<div class="img_ad"></div>
<div class="info_ad">
<p>Bmw M3 Azul<br>6000€<spam> . Hace 2h a 1 km de ti</spam></p>
</div>
</li>
<li>
<div class="img_ad"></div>
<div class="info_ad">
<p>Seat ibiza 97<br>2000€<spam> . Hace 2h a 1 km de ti</spam></p>
</div>
</li>
<li>
<div class="img_ad"></div>
<div class="info_ad">
<p>Casa en oleiros<br>250000€<spam> . Hace 2h a 1 km de ti</spam></p>
</div>
</li>
</ul>
</div>
</div>
Mi CSS:
.scroll{
-webkit-overflow-scrolling: touch;
}
div#index{
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
div#index div#bodyindex{
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
padding-top: 90px;
padding-bottom: 50px;
padding-right: 17px;
}
div#index div#bodyindex ul{
-webkit-transform: translate3d(0,0,0);
}
div#index div#bodyindex ul li{
list-style: none;
}
Gracias con antelación. Un saludo