Jul 25, 2019

-webkit-overflow-scrolling

-webkit-overflow-scrolling CSS 属性可以让滚动元素在 ios 设备上获得接近原生的平滑滚动以及滚动回弹效果。

支持的值：

auto 普通滚动行为，当手指离开屏幕时，滚动会立即停止（默认）
touch 基于动量的滚动行为，当手指离开屏幕时，滚动会根据手势强度以相应的速度持续一段时间，同时会赋予滚动回弹的效果

一个例子：

<template>
  <section>
    <div class="scroll-touch">
      <p>
        This paragraph has momentum scrolling
      </p>
    </div>
    <div class="scroll-auto">
      <p>
        This paragraph does not.
      </p>
    </div>
  </section>
</template>

<style scoped>
  div {
    width: 100%;
    overflow: auto;
  }

  p {
    width: 200%;
    background: #f5f9fa;
    border: 2px solid #eaf2f4;
    padding: 10px;
  }

  .scroll-touch {
    -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
  }

  .scroll-auto {
    -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
  }
</style>

结果（需要使用 ios 设备观察）：

This paragraph has momentum scrolling

This paragraph does not.

但是，这个属性在当容器内有 position: fixed 元素时会产生冲突，fixed 元素会在平滑滚动结束时才回到正确的位置，解决方案通常是重新整理组件树，使 fixed 元素不出现在滚动容器之内即可。

ref: