屬性: -webkit-overflow-scrolling:touch
怎么說了呢缸濒,這個屬性帶來的好的結(jié)果是 在使用 overflow-y:scorll 后頁面滑動不流暢足丢,很木的效果。
-webkit-overflow-scrolling
:屬性控制元素在移動設(shè)備上是否使用滾動回彈效果.
auto
: 使用普通滾動, 當(dāng)手指從觸摸屏上移開庇配,滾動會立即停止斩跌。
touch
: 使用具有回彈效果的滾動, 當(dāng)手指從觸摸屏上移開,內(nèi)容會繼續(xù)保持一段時間的滾動效果捞慌。繼續(xù)滾動的速度和持續(xù)的時間和滾動手勢的強烈程度成正比耀鸦。同時也會創(chuàng)建一個新的堆棧上下文。
在移動端上啸澡,在你用overflow-y:scorll
屬性的時候袖订,你會發(fā)現(xiàn)滾動的效果很木,很慢嗅虏,這時候可以使用-webkit-overflow-scrolling:touch
這個屬性著角,讓滾動條產(chǎn)生滾動回彈的效果,就像ios原生的滾動條一樣流暢旋恼。
解決safari滑動回彈效果遮擋頁面頂部和底部Fixed元素
其中給每個滑動元素的下一個子元素設(shè)置 min-height:calc(100%+1px)
的方法可行吏口,但是不是完全解決,當(dāng)?shù)谝淮渭虞d到頁面的時候滑動到底部還是會出現(xiàn)回彈遮擋問題冰更,不刷新頁面的情況下产徊,然后第二次就可以了。