Błąd przewijania Css iOS 10

Question

Zauważyłem dziwny błąd w iOS 10 z właściwościami CSS scroll-snap.

Oto mój 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; 
} 

Gdybym programowo przejdź do przystawki punktu, a następnie zmienić zawartość wewnątrz pojemnika przewijania guzikiem, NAV wskoczy z powrotem do pierwszej przystawce punkcie.

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

Nie wydaje się być związany ze sposobem wywoływania przewijania. Wszystkie te metody przewijania dają ten sam rezultat:

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

1. Błąd nie zdarza się podczas przewijania ręcznie (patrz komentarz @ Maxime poniżej).
2. Jest obecny od wersji 10.3.2 systemu iOS.
3. Nie wiem, czy to ustalone w iOS 11.

Spędziłem kilka dni próbuje rozwiązać ten problem, ale bez powodzenia tej pory.

Oto okrojoną przykładem mojego nav:

Codepen Demo

Czy ktoś zna sposób wokół tego głupiej bug?

Answer 1

Spróbuj tak:

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

Answer 2

tworzę własne POZIOMY jquery przewijania-Snap, który zostanie wywołany na strona obciążenia, oknie rozmiaru i zwój pojemnika - zapobiega to dowolny potrzeba css:

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

Poniższe instrukcje if/else jeśli planujesz zmienić szerokość obiektu w zależności od widtu h strony. Jeśli nie, można po prostu usunąć i ustawić szerokość var ​​= domyślną szerokość

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

Poniżej jest CSS, które idzie w parze z moim przewijania przystawki przykład

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