javascript - scroll-snap-type




CSS-Scroll-Snap-Fehler iOS 10 (2)

Bitte versuchen Sie es so:

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

Ich habe einen merkwürdigen Fehler in iOS 10 mit den CSS- scroll-snap Eigenschaften festgestellt.

Hier ist mein 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;
}

Wenn ich programmgesteuert zu einem Snap-Punkt scrolle und dann den Inhalt innerhalb des Scroll-Snap-Containers ändere, rastet die Navigation wieder am ersten Snap-Punkt ein.

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

Es scheint nicht zu tun zu haben, wie ich das Scrollen auslöse. Alle diese Bildlaufmethoden liefern das gleiche Ergebnis:

$("#springBoard")[0].scrollLeft = 320
$("#springBoard").animate({scrollLeft: 320}, 1)
$("#springBoard > section:eq(1)")[0].scrollIntoView()
window.location.hash = "sectionId"
  1. Der Fehler tritt nicht beim manuellen Scrollen auf (siehe Kommentar von @ maxime unten).
  2. Es ist seit Version 10.3.2 von iOS vorhanden.
  3. Weiß nicht, ob es in iOS 11 behoben ist.

Ich habe ein paar Tage damit verbracht, das Problem zu lösen, aber bisher ohne Erfolg.

Hier ist ein abgespecktes Beispiel meines Navs:

Codepen Demo

Kennt jemand einen Weg, um diesen blöden Fehler zu umgehen?


Ich habe meinen eigenen HORIZONTAL-Jquery-Scroll-Snap erstellt, der beim Laden der Seite , beim Ändern der Fenstergröße und beim Scrollen des Containers ausgelöst wird. Dadurch wird die Verwendung von css vermieden:

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

Die folgende if / else-Anweisung ist, wenn Sie die Breite des Objekts in Abhängigkeit von der Seitenbreite ändern möchten. Wenn nicht, können Sie es einfach löschen und var width = Ihre Standardbreite festlegen

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

Nachfolgend finden Sie das CSS, das zu meinem Beispiel für den Bildlauf-Snap gehört

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%;
    }
}




scroll-snap-points