zoukankan      html  css  js  c++  java
  • 滚动界限坐标 | 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
  • 相关阅读:
    CDN的实现原理
    【Android】 textview 中超出屏幕宽度的字符 省略号显示
    【用户反馈】海外产品大牛: 让用户反馈推着你走
    谷歌2013年搜索热榜 全球榜曼德拉抢榜首 中国区小爸爸第一
    数字(数码)舵机和模拟舵机的区别
    x86 版的 Arduino Intel Galileo 开发板的体验、分析和应用
    【Android】Android自定义属性,attr format取值类型
    android中Textview 和图片同时显示时,文字省略号显示,图片自动靠到右边
    Android webView打不开baidu网页的解决办法
    企鹅的石头
  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13222117.html
Copyright © 2011-2022 走看看