-webkit-overflow-scrolling

語法:

-webkit-overflow-scrolling:auto | touch

預設值auto

適用於:塊容器,伸縮盒容器,grid容器

繼承性:無

動畫性:否

計算值:指定值

取值:

auto:
預設值。當手指從觸摸屏上移開,滾動會立即停止,相當於普通的滾動效果。
touch:
使用具有回彈效果的滾動,當手指從觸摸屏上移開,內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立一個新的堆疊上下文。

說明:

指定元素是否使用native-style(滾動回彈效果)來滾動溢出內容。
  • 該屬性用來控制元素在移動設備上是否使用滾動回彈效果。
  • 該屬性在 iOS UIWebView 中無效。
  • 該屬性需與 overflow 屬性配合使用,因為必須先定義元素允許滾動,才可以指定它在滾動具有回彈效果。

    CSS:

    .demo { height: 200px; overflow-y: auto; /* 允許元素滾動,值可以是 auto | scroll */ -webkit-overflow-scrolling: touch; /* 定義滾動時回彈效果 */ }

    在移動設備上執行這個示例,將能感受到與 Native 相同的滾動回彈;

  • 對應的腳本特性為webkitOverflowScrolling

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-11.0 2.0-40.0 4.0-45.0 6.0-8.0 15.0-29.0 5.0+ -webkit- 4.0+ -webkit- #1 18.0-42.0 -webkit- #1
  1. Android 4.0前期增加了快速回彈滾動效果,不過隨後這個特性又被移除,目前為止 Android 上所有瀏覽器支援該屬性但未實現回彈效果。

示例: