• 滚动界限坐标 | scroll-snap-coordinate (Scroll Snap)


  •   CSS 中文开发手册

    滚动界限坐标 | scroll-snap-coordinate (Scroll Snap) - CSS 中文开发手册

    弃用

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

    scroll-snap-coordinate CSS属性定义将与最近的祖先滚动容器的对准元件内的x和y坐标的位置scroll-snap-destination为各自的轴线。

    如果元素已被转换,则以相同方式转换捕捉坐标,以便在捕捉点与元素对齐时显示。

    /* Keyword value */
    scroll-snap-coordinate: none;
    
    /* <position> values */
    scroll-snap-coordinate: 50px 50px;                   /* Single coordinate */
    scroll-snap-coordinate: 100px 100px, 100px bottom;   /* Multiple coordinates */
    
    /* Global values */
    scroll-snap-coordinate: inherit;
    scroll-snap-coordinate: initial;
    scroll-snap-coordinate: unset;

    初始值

    none

    适用于

    所有元素

    遗传

    没有

    百分比

    请参阅元素的边框

    媒体

    互动

    计算值

    如指定的那样,但相对长度转换为绝对长度

    动画类型

    一个位置

    规范的顺序

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

    语法

    none指定该元素不参与捕捉点。

    <position>指定从元素边框的起始边缘开始的对齐坐标的偏移量。对于每个配对,第一个值给出快照坐标的x坐标,第二个值给出它的y坐标。

    形式语法

    none | <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 coordinate0">
          <div>1</div>
          <div>2</div>
          <div>3</div>
        </div>
      </div>
    
      <div>
        <p>At coordinate (25, 0)</p>
        <div class="scrollContainer coordinate25">
          <div>1</div>
          <div>2</div>
          <div>3</div>
        </div>
      </div>
    
      <div>
        <p>At coordinate (50, 0)</p>
        <div class="scrollContainer coordinate50">
          <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 {
       100px;
      overflow: auto;
      white-space: nowrap;
      scroll-snap-type: mandatory;
      font-size: 0;
    }
    
    .scrollContainer > div {
       100px;
      height: 100px;
      display: inline-block;
      line-height: 100px;
      text-align: center;
      font-size: 50px;
    }
    
    .coordinate0 > div {
      scroll-snap-coordinate: 0 0;
    }
    
    .coordinate25 > div {
      scroll-snap-coordinate: 25px 0;
    }
    
    .coordinate50 > div {
      scroll-snap-coordinate: 50px 0;
    }
    
    .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-coordinate' 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/32113.html
  • 相关阅读:
    安装ffmpeg视频软件 Linux
    Linux 计划任务
    分享一个大牛的博客地址
    yii验证码Captcha使用以及为什么验证码不刷新问题
    YII缓存之数据缓存
    YII用户注册和用户登录(二)之登录和注册在视图通过表单使用YII小物件并分析
    YIIMVC之用户注册和用户登录
    yii 总结
    yii linux 自动执行脚本
    yii downlist
  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13222117.html
Copyright © 2020-2023  润新知