• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • scroll-behavior

    版本:CSS3

    当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,CSS 属性 scroll-behavior 为一个滚动框指定滚动行为,其他任何的滚动,例如那些由于用户行为而产生的滚动,不受这个属性的影响。在根元素中指定这个属性时,它反而适用于视窗。

    示例

    /* Keyword values */
    scroll-behavior: auto;
    scroll-behavior: smooth;
    
    /* Global values */
    scroll-behavior: inherit;
    scroll-behavior: initial;
    scroll-behavior: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE、safari浏览器不支持scroll-behavior,其余浏览器都支持scroll-behavior

    语法

    scroll-behavior:auto| smooth

    取值

    • auto:滚动框立即滚动。
    • smooth:滚动框通过一个用户代理预定义的时长、使用预定义的时间函数,来实现平稳的滚动,用户代理应遵循其平台的约定,如果有的话。
    默认值auto
    适用于滚动框
    继承性
    动画性discrete
    计算值指定值

    实例

    <nav>
      <a href="#page-1">1</a>
      <a href="#page-2">2</a>
      <a href="#page-3">3</a>
    </nav>
    <scroll-container>
      <scroll-page id="page-1">1</scroll-page>
      <scroll-page id="page-2">2</scroll-page>
      <scroll-page id="page-3">3</scroll-page>
    </scroll-container>
    
    //CSS
    
    a {
      display: inline-block;
      width: 50px;
      text-decoration: none;
    }
    nav, scroll-container {
      display: block;
      margin: 0 auto;
      text-align: center;
    }
    nav {
      width: 339px;
      padding: 5px;
      border: 1px solid black;
    }
    scroll-container {
      display: block;
      width: 350px;
      height: 200px;
      overflow-y: scroll;
      scroll-behavior: smooth;
    }
    scroll-page {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: 5em;
    }
    

    效果如下:

    123