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


  • ??CSS 中文开发手册

    滚动界限终点 | scroll-snap-destination (Scroll Snap) - CSS 中文开发手册

    scroll-snap-destination

    弃用

    该功能已从Web标准中删除。尽管一些浏览器可能仍然支持,但它正在被丢弃。避免使用它并尽可能更新现有的代码; 请参阅本页面底部的兼容性表格来指导您的决定。请注意,此功能可能随时停止工作。

    scroll-snap-destination CSS属性定义滚动容器的视觉范围内的x和y坐标的位置视哪个元素捕捉点与对准。

    /* <position> value */
    scroll-snap-destination: 400px 600px;
    
    /* Global values */
    scroll-snap-destination: inherit;
    scroll-snap-destination: initial;
    scroll-snap-destination: unset;

    Initial value

    0px 0px

    应用对象

    scroll containers

    是否可继承

    no

    百分比值

    relative to same axis of the padding-box of the scroll container

    媒体

    interactive

    计算值

    as specified, but with relative lengths converted into absolute lengths

    动画类型

    a position

    规范顺序

    the unique non-ambiguous order defined by the formal grammar

    语法

    <position>从滚动容器的可视视口的起始边缘指定捕捉目标的偏移量。第一个值给出了捕捉目标的x坐标,第二个值是其y坐标。

    形式语法

    <position>where 
    <position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
    where 
    <length-percentage> = <length> | <percentage>

    HTML内容

    <div id="container">
      <div>
        <p>At coordinate (0, 0)</p>
        <div class="scrollContainer destination0">
        ? <div>1</div>
        ? <div>2</div>
        ? <div>3</div>
        </div>
      </div>
    
      <div>
        <p>At coordinate (25, 0)</p>
        <div class="scrollContainer destination25">
        ? <div>1</div>
        ? <div>2</div>
        ? <div>3</div>
        </div>
      </div>
    
      <div>
        <p>At coordinate (50, 0)</p>
        <div class="scrollContainer destination50">
        ? <div>1</div>
        ? <div>2</div>
        ? <div>3</div>
        </div>
      </div>
    </div>

    CSS内容

    #container {
      display: flex;
    }
    
    #container > div:nth-child(-n+2) {
      margin-right: 20px;  
    }
    
    .scrollContainer {
      width: 100px;
      overflow: auto;
      white-space: nowrap;
      scroll-snap-points-x: repeat(100%);
      scroll-snap-type: mandatory;
      scroll-snap-destination: 20px 0;
      font-size: 0;
    }
    
    .destination0 {
      scroll-snap-destination: 0 0;
    }
    
    .destination25 {
      scroll-snap-destination: 25px 0;
    }
    
    .destination50 {
      scroll-snap-destination: 50px 0;
    }
    
    .scrollContainer > div {
      width: 100px;
      height: 100px;
      display: inline-block;
      line-height: 100px;
      text-align: center;
      font-size: 50px;
    }
    
    .scrollContainer > div:nth-child(even) {
      background-color: #87EA87;
    }
    
    .scrollContainer > div:nth-child(odd) {
      background-color: #87CCEA;
    }

    规范

    Specification

    Status

    Comment

    CSS Scroll Snap Module Level 1The definition of ‘scroll-snap-destination‘ in that specification.

    Candidate Recommendation

    Initial definition

    浏览器兼容性

    Feature

    Chrome

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari (WebKit)

    Basic support

    ?

    39.0 (39.0)

    No support

    No support

    No support

    Feature

    Android

    Firefox Mobile (Gecko)

    Firefox OS

    IE Phone

    Opera Mobile

    Safari Mobile

    Basic support

    No support

    39.0 (39.0)1

    39.0 (39.0)

    No support

    No support

    No support

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

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

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


    下一篇:溢出包装 | overflow-wrap (Text) - CSS 中文开发手册 - Break易站