Scroll

Scroll 属于 prototype 的一部分.

当一个 Frame 的内容超出 Frame 的高度或宽度时, Frame 就具备了 scroll 的能力.

通过 uncheck clip content 我们可以看到内容已经超出 Frame 的高度了

在 prototype 内有一个 vertical scrolling 的设置, 开启后就可以看到 scroll 效果了

Position Fixed

如果想让一个子元素一直定位在 screen 中, 不被 scroll 影响, 只需要勾选 Fix position when scrolling 就可以了

效果:

无法使用的场景

当使用 Auto Layout 的情况下, 所以子元素是无法设置 position fixed 的.

子元素必须在第一屏, 并且完整显示才可以做到 position fixed 的效果.

Figma 学习笔记 – Scroll and Position Fixed的更多相关文章

  1. 【学习笔记】HTML position(static、fixed、relative、absolute)

    [本文转载] position的四个属性值:static.fixed.relative.absolute 下面分别讲述这四个属性:<div id="parent">   ...

  2. 学习笔记day6：position index结合

    z-index属性适用于定位元素(position 属性值为 relative 或 absolute 或 fixed的对象),用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序(stack o ...

  3. ios position:fixed 上滑下拉抖动

    ios position:fixed 上滑下拉抖动 最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...

  4. position:fixed和scroll实现div浮动【示例】

    前言 在自己建站的过程中,要实现一个div随滚动条浮动的效果,网上找了些示例不太好用,还是自己动手,丰衣足食,写的不好请大家谅解,毕竟我不是搞前端的,因为自己建站毕竟每一步都必须自己来,这边只是做个记 ...

  5. 解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动

    一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景 一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...

  6. Issues with position fixed & scroll（移动端 fixed 和 scroll 问题）

    转载请注明英文原文及译文出处 原文地址:Issues with position fixed & scrolling on iOS 原文作者:Remy Sharp译文地址:移动端 fixed ...

  7. html学习笔记之position

    今天主要一直看试验position的各种属性,现在记录下来以此备忘. position有四种常有属性,分别是static,fixed.absolute,relative fixed就是相对于窗口的位置 ...

  8. CSS学习笔记：定位属性position

    目录 一.定位属性简介 二.各属性值的具体功能 1. relative 2. absolute 3. fixed 三.三种定位属性的效果总结 参考资料:https://www.bilibili.com ...

  9. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  10. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

随机推荐

  1. 高程读后感（三）— JS对象实现继承的6种模式及其优缺点

    目录 1.原型链 1.1.默认的原型 1.2.原型和实例的关系 1.3.原型链的问题 2.借用构造函数 2.1.传递参数 2.2.借用构造函数的问题 3.组合继承 4.原型式继承 5.寄生式继承 6. ...

  2. oeasy教您玩转vim - 91 - # vim脚本编程展望

    ​ vim脚本编程展望 回忆 上次我们彻底研究了vim高亮的原理 各种语法项syntax item 关键字keyword 匹配模式match 区域region 定义好了之后还可以设置链接成组 hi d ...

  3. CF479C 题解

    洛谷链接&CF 链接 题目简述 一个人想要安排期末考试的时间. 有 \(n\) 场考试,每场考试有两个时间 \(x_i,y_i\),一个是老师规定的时间,另外一个是他与老师商量好的考试时间. ...

  4. [rCore学习笔记 016]实现应用程序

    写在前面 本随笔是非常菜的菜鸡写的.如有问题请及时提出. 可以联系:1160712160@qq.com GitHhub:https://github.com/WindDevil (目前啥也没有 设计方 ...

  5. Vue 在父(子)组件引用其子(父)组件方法和属性

    Vue 在父(子)组件引用其子(父)组件方法和属性   by:授客 QQ:1033553122   开发环境   Win 10 element-ui  "2.8.2" Vue 2. ...

  6. 题解：P10733 [NOISG2019 Prelim] Lost Array

    题解:P10733 [NOISG2019 Prelim] Lost Array 思路 对于任意 \(\min(X_{A_{i}},X_{B_{i}})=C_{i}\). 只要让 \(X_{A_{i}} ...

  7. APK包的加固手段收集（浅）

    目录 防止APK被调试 加壳 代码混淆: 检测调试器: 使用反调试技术: 环境检测: 使用Native代码: 多层防护: 防止APK被篡改 签名校验: V1 签名机制 V2 签名机制 V3 签名机制 ...

  8. Segment-anything学习到微调系列_SAM初步了解

    Segment-anything学习到微调系列_SAM初步了解 前言 本系列文章是博主在工作中使用SAM模型时的学习笔记,包含三部分: SAM初步理解,简单介绍模型框架,不涉及细节和代码 SAM细节理 ...

  9. 制作Linux系统的启动盘

    我不是没有试过软碟通制作启动盘 在写入U盘的选项确认的时候,盘区不支持NTFS!? 另外什么大白菜和老毛桃这样的根本就不支持Linux镜像加载 还是百度的这个靠谱 https://jingyan.ba ...

  10. 使用map方法递归替换组数对象内的某一个值

    const TreeDataSource = (arr) => { // 判断是否是数组 if (!arr || !arr.length > 0) { return } // 将值存入ma ...