javascript - scroll snap css

Css scroll-snap bug iOS 10

Question

Noté un error extraño en iOS 10 con las propiedades CSS scroll-snap .

Aquí está mi css:

#springBoard{
height: 100%;
width: 100%;
font-size: 0px;
white-space: nowrap;
overflow: scroll;
-webkit-overflow-scrolling: touch;
-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-points-x: repeat(100%);
}
section{
display: inline-block;
width: 100%;
height: 100%;
vertical-align: top;
font-size: 16px;
}

Si me desplazo programáticamente a un punto de referencia y luego cambio el contenido dentro del contenedor de desplazamiento de desplazamiento, el navegador vuelve a su primer punto de referencia.

// Programatically scroll the scroll-snap container
$("#springBoard")[0].scrollLeft = 320

No parece estar relacionado con la forma en que desencadeno el desplazamiento. Todos estos métodos de desplazamiento producen el mismo resultado:

$("#springBoard")[0].scrollLeft = 320
$("#springBoard").animate({scrollLeft: 320}, 1)
$("#springBoard > section:eq(1)")[0].scrollIntoView()
window.location.hash = "sectionId"

1. El error no se produce al desplazarse manualmente (consulte el comentario de @ maxime a continuación).
2. Está presente desde la versión 10.3.2 de iOS.
3. No sé si está arreglado en iOS 11.

Pasé un par de días tratando de resolver el problema pero sin éxito hasta ahora.

Aquí hay un ejemplo simplificado de mi navegación:

Codepen Demo

¿Alguien sabe una manera de evitar este error estúpido ?

Answer 1

Creé mi propio jquery HORIZONTAL scroll-snap que se activa con la carga de la página , el tamaño de la ventana y el desplazamiento del contenedor . Esto evita cualquier necesidad de css:

$(".container").scroll(function() {

La siguiente instrucción if / else es si planea cambiar el ancho del objeto dependiendo del ancho de la página. Si no es así, simplemente puede eliminarlo y establecer el ancho var = su ancho predeterminado

 var width = 1; //100% - default value / small screen
if(window.innerWidth >= 993) //large screen
width = 1/4; //25%
else if(window.innerWidth >= 601) //medium screen
width = 1/3; //33.333%
var containerWidth = $(".container").width();
var sectionWidth = containerWidth * width; //gets the length of each section
var currentScroll = $(".container").scrollLeft();
var farOff = currentScroll % sectionWidth; //determines how far user is from the beginning of the current section
if(farOff == 0) //just for efficiency
return;
clearTimeout($.data(this, ''scrollTimer''));
$.data(this, ''scrollTimer'', setTimeout(function() {
if(farOff >= sectionWidth/2) //scroll-snaps to next section
$(".container").animate({
scrollLeft: (currentScroll + sectionWidth - farOff),
});
else //scroll-snaps to previous section
$(".container").animate({
scrollLeft: (currentScroll - farOff),
});
}, 550));
});

A continuación se muestra el CSS que acompaña a mi ejemplo de desplazamiento de desplazamiento

div.container{
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
-o-overflow-scrolling: scroll;
-moz-overflow-scrolling: scroll;
overflow-y: hidden;
white-space: nowrap !important;
}
.container section{
display: inline-block;
padding: 10px;
width:100%;
vertical-align: top;
margin-bottom: 10px;
}
.container > section > div{
overflow: initial;
white-space: normal;
}
@media (min-width: 601px){ /* medium */
.container section{
width: 33.33333333%;
}
}
@media (min-width: 952px){ /* large */
.container section{
width: 25%;
}
}

Answer 2

Por favor, intente así:

$(''#springBoard'').animate({scrollLeft: $(''#springBoard'').position().left + 320},1 );