1. 程式人生 > >ionic3 滾動頁面時 (ios) safari橡皮筋效果

ionic3 滾動頁面時 (ios) safari橡皮筋效果

-webkit-overflow-scrolling:auto | touch | [initial | inherit | unset | revert]; 

用ionic3做手機通訊錄,拖動右邊字母索引控制聯絡人(scroll-content元素)滾動時, 在ios中ionic頁面會跟著一起滾動。

原因就是:

    1、ios 中ionic內建瀏覽器為Safari,

    2、她實現了-webkit-overflow-scrolling:(目前安卓上未實現)

    3、ionic給 scroll-content 元素加了-webkit-overflow-scrolling: touch;

在ios中,滾動慣性(手鬆開後頁面還會減速滾動一段距離)和橡皮筋效果是不能分開的。

如果直接使用樣式 -webkit-overflow-scrolling: auto | unset; 覆蓋 scroll-content 的樣式的話,滾動的慣性和橡皮筋效果同時消失。

肯定不是我們想要的:

那麼更好的解決辦法是:

    1、在 scroll-content 上新增樣式 -webkit-overflow-scrolling: auto | unset;  去掉橡皮筋效果;

    2、同時將聯絡人列表放在一個容器 div 中,容器div 設定為 scroll-content 同樣的高度,並設定overflow-y: auto;

    3、將容器div 設定樣式 -webkit-overflow-scrolling: auto  讓其擁有滾動慣性和橡皮筋效果。

    4、將包裝通訊錄字母索引的div容器放到 2 、中的容器div 外。  

這樣,拖動字母索引div,就不會引起 scroll-content  跟著滾動了。