-webkit-overflow-scrolling 與滾動回彈效果.

來源:互聯網
上載者:User

標籤:上下   ios系統   一點   體驗   內容   搜尋   時間   col   參考   

參考來源:https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling

     https://www.w3cways.com/1988.html

-webkit-overflow-scrolling 用來控制元素在行動裝置上是否使用滾動回彈效果。

事故の起因

要做有很多列表的頁面,然後並不適用iscroll等滾動的外掛程式,做完也沒按之後,滑動列表卡頓卡頓的,遭啦,這樣子的滑動太讓人不舒服。

網上搜尋了一下,發現了一個新屬性,-webkit-overflow-scroll,專治“該病”。我手快的設定body設定上-webkit-overflow-scrolling: touch,喲西,頁面滾動起來舒服多了,不再是是卡頓卡頓的(測試機iPhone6s)。上MDN搜尋了一下該屬性的相容性,有點失望,目前只是iOS系統得支援了。不過也不影響,至少加上這個體驗可以讓iOS使用者體驗更棒一點。

取值
-webkit-overflow-scrolling: auto  |  touch;

auto: 普通滾動,當手指從觸控螢幕上移開,滾動立即停止

touch:滾動回彈效果,當手指從觸控螢幕上移開,內容會保持一段時間的滾動效果,繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立一個新的堆棧上下文。

推薦寫法

下面是相容安卓和iOS的寫法

over-flow: auto;     /* winphone8和android4+ */-webkit-overflow-scrolling: touch;    /* ios5+ */

 

 

適用範圍

我一般在寫頁面什麼時候用到這個屬性的情況呢。

1、一般就是頁面要滾動,然後不使用一些滾動的外掛程式

2、彈窗內容過長,此時需要滾動顯示,那麼此時加上這個屬性,滾動起來體驗就大大提升了。

使用過程遇到問題

1、我在非body元素,添加這個屬性,竟然沒有效果。如果添加上overflow-y: scroll,就可以優雅的滾動起來了。

2、當一個元素設定過position: absolute|relative,後再增加-webkit-overflow-scrolling: touch;屬性後,會發現,滑動幾次後就捲動區域會卡住,不能在滑動,這時給元素增加個z-index值就可以了。

解決方案:

給元素增加個z-index值

webkit-overflow-scrolling: touch;position:absolute;z-index:1;

-webkit-overflow-scrolling 與滾動回彈效果.

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.