滚动行为 | scroll-behavior (Object Model View) - CSS 中文开发手册 - Break易站


  • ??CSS 中文开发手册

    滚动行为 | scroll-behavior (Object Model View) - CSS 中文开发手册

    scroll-behavior由于导航或CSSOM滚动API,滚动发生时,CSS属性指定滚动框的滚动行为。任何其他滚动条,例如由用户执行的滚动条,都不受此属性的影响。在根元素上指定此属性时,它将应用于视口。

    用户代理可能忽略此属性。

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

    初始值

    auto

    适用于

    滚动框

    遗传

    没有

    媒体

    visual

    计算值

    作为指定

    动画类型

    离散的

    规范的顺序

    形式语法定义的独特的非模糊顺序

    语法

    取值

    auto滚动框会立即滚动。smooth滚动框在用户代理定义的时间段内使用用户代理定义的定时功能以平滑的方式滚动。用户代理应该遵循平台惯例(如果有的话)。

    形式语法

    auto | smooth

    HTML

    <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;
    }

    输出

    规范

    Specification

    Status

    Comment

    CSS Object Model (CSSOM) View ModuleThe definition of ‘scroll-behavior‘ in that specification.

    Working Draft

    Initial specification

    浏览器兼容性

    Feature

    Chrome

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari

    Basic support

    611

    36 (36)

    No support

    (Yes)1

    No support

    Feature

    Android

    Firefox Mobile (Gecko)

    IE Mobile

    Opera Mobile

    Safari Mobile

    Basic support

    No support

    36 (36)

    No support

    No support

    No support

    
    
  • ??CSS 中文开发手册
  • 转载请保留页面地址:https://www.breakyizhan.com/css/32119.html

    滚动行为 | scroll-behavior (Object Model View) - CSS 中文开发手册 - Break易站

    上一篇:用户选择 | user-select (Basic User Interface) - CSS 中文开发手册 - Break易站


    下一篇:滚动界限终点 | scroll-snap-destination (Scroll Snap) - CSS 中文开发手册 - Break易站