Css scroll-snap lỗi iOS 10

Question

Tôi nhận thấy một lỗi lạ trong iOS 10 với thuộc tính CSS scroll-snap.

Dưới đây là css của tôi:

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

Nếu tôi lập trình di chuyển đến một snap-point và sau đó thay đổi nội dung bên trong container cuộn-snap, các nav chụp lại cho các snap-point đầu tiên.

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

Nó dường như không liên quan đến cách tôi kích hoạt cuộn. Tất cả những phương pháp di chuyển tạo ra kết quả tương tự:

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

1. Lỗi không xảy ra khi di chuyển bằng tay (Xem comment @ Maxime dưới đây).
2. Phiên bản này có từ phiên bản 10.3.2 của iOS.
3. Không biết nếu nó được cố định trong iOS 11.

tôi đã dành một vài ngày cố gắng để giải quyết vấn đề nhưng không thành công cho đến nay.

Dưới đây là một ví dụ rút gọn của nav của tôi:

Codepen Demo

Có ai biết một con đường xung quanh ngu ngốc lỗi này?

Answer 1

Vui lòng thử như thế này:

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

Answer 2

Tôi tạo của riêng tôi jquery NGANG cuộn-snap mà được kích hoạt trên tải trang, cửa sổ thay đổi kích thước và cuộn của container - điều này ngăn cản bất kỳ cần cho css:

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

Câu lệnh if/else khác nếu bạn định thay đổi chiều rộng của đối tượng tùy thuộc vào widt h của trang. Nếu không, bạn chỉ có thể xóa nó và thiết lập var width = chiều rộng mặc định của bạn

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

Dưới đây là CSS mà đi cùng với cuộn của tôi chụp dụ

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