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 );