Css scroll-snap bug iOS 10

我注意到了iOS 10中一個奇怪的BUG，其中包含CSS scroll-snap屬性。Css scroll-snap bug iOS 10

這裏是我的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; 
}

如果以編程方式滾動到對齊點，然後改變其滾動捕捉容器內的內容，在導航彈回的第一咬合點。

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

它似乎沒有關係到我觸發滾動的方式。所有這些滾動方式產生相同的結果：

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

手動滾動時的錯誤不會發生（見下面@馬克西姆的評論）。
從iOS 10.3.2版本開始出現。
不知道它的固定在iOS的11

我花了幾天的努力解決的問題，但沒有成功爲止。

這裏是我的資產淨值的簡裝例如：

Codepen Demo

有誰知道解決這個 ~~愚蠢的錯誤~~ 的方式？

來源

2017-07-19 Etienne Martin

如果我導航，然後點擊「更改內容」按鈕保持在同一個捕捉點。只有當我點擊按鈕，而沒有做任何滾動，有錯誤。 – Maxime

您是否嘗試過以編程方式滾動頁面？ 'window.scrollTo（0，0）; //或一些變體＃ –

感謝您的建議，我試着滾動窗口，但它不能解決問題。 –

-1

請嘗試這樣的：

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

來源

2017-12-14 10:27:32

你能解釋更多，以說清楚。 –

Position（）。left將始終返回0.此外，爲什麼將動畫元素設置爲320ms？我的代碼中的320代表iPhone SE的寬度。這對我來說沒有意義。 –

對不起，我想補充一下。但這是我的錯誤。 $（'＃springBoard'）。animate（{scrollLeft：$（'＃springBoard'）。position（）。left + 320}，1）; –

我創建了自己的水平jQuery的滾動捕捉其大幹快上頁面加載，窗口引發調整，並滾動容器的 - 這可以防止任何需要css：

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

下面的if/else語句是，如果您打算根據widt更改對象的寬度h的頁面。如果沒有，你可以將其刪除，並設置VAR寬度= 默認寬度

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

下面是我的滾動伴隨而來的CSS管理單元例如

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

來源

2018-01-27 00:32:28

Css scroll-snap bug iOS 10

回答

相關問題