使用'-webkit-overflow-scrolling：touch'在滾動/拖動時隱藏內容

作爲標題說我在使用CSS屬性-webkit-overflow-scrolling: touch時滾動/拖動內容時出現內容隱藏問題。使用'-webkit-overflow-scrolling：touch'在滾動/拖動時隱藏內容

對於一個基本的瞭解，這裏是我的標記

<div class="page"> 
    <div class="section_title">Title</div> 
    <div class="items"> 
     <div class="item">...Text and Image...</div> 
     <div class="item">...Text and Image...</div> 
     <div class="item">...Text and Image...</div> 
    </div> 
    <div class="section_title">Title</div> 
    <div class="items"> 
     <div class="item">...Text and Image...</div> 
     <div class="item">...Text and Image...</div> 
     <div class="item">...Text and Image...</div> 
    </div> 
</div>

而CSS：

.page { 
    width: 320px; 
    height: 366px; 
    overflow: scroll; 
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch; 
}

本身做工不錯的代碼，我可以通過內容滾動，但一切，是的內在滾動/拖動時，項目div會隱藏。任何人遇到這個問題並解決它，或者它只是移動Safari的標準行爲來節省內存，我們無能爲力嗎？

任何幫助表示讚賞:-)

來源

2012-03-21 Björn Kaiser

您是否嘗試過將元素放入內存？

如果不行，請嘗試將.items在內存中使用CSS -webkit-transform: translate3d(0,0,0);

您可能希望在嵌套去更高或更低取決於性能，即應用翻譯成。第或.item。這會增加可能會導致崩潰的內存，但它有助於瀏覽器重新繪製所有內容。

反正，希望有所幫助！

來源

2012-03-31 06:26:23 tuddy

它的工作！謝謝你一千次:-) – 2012-04-01 15:03:04

這種做了我的一天，謝謝！ – 2013-01-24 16:53:01

對我來說，工作也像一個魅力，謝謝。 – abettermap 2016-09-27 18:17:15

這可能與webkit中的錯誤有關。如果您有任何「位置：相對」或絕對代碼應該工作得很好。

來源

2012-06-13 12:51:29

使用'-webkit-overflow-scrolling：touch'在滾動/拖動時隱藏內容

回答

相關問題