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. 服务之间的调用之RPC深入理解

    一:RPC RPC 即远程过程调用(Remote Procedure Call Protocol,简称RPC),像调用本地服务(方法)一样调用服务器的服务(方法).通常的实现有 XML-RPC , J ...

  2. leetcode简单(设计)：[225, 232, 303, 703, 705, 706, 933, 1603, 1656, 09, 30, 041, 03.06]

    目录 225. 用队列实现栈(先入后出) 232. 用栈实现队列(先入先出) 303. 区域和检索 - 数组不可变 703. 数据流中的第 K 大元素 705. 设计哈希集合 706. 设计哈希映射 ...

  3. 在缩小浏览器宽度的时候，图片会超出li的宽度

    要确保在缩小浏览器宽度时,图片不会超出 <li> 元素的宽度,您可以为描述文本添加一些样式,以便让图片适应于 <li> 元素.一种常见的方法是使用 CSS 中的 max-wid ...

  4. TIER 1: Three

    TIER 1: Three 信息收集 通过以前的练习,我们首先确认目标 IP 开放了哪些端口,比如使用 nmap 之类的工具进行扫描.本次靶机开放: 22 端口:SSH, OpenSSH 80 端口: ...

  5. 《Operating Systems: Three Easy Pieces》阅读记录

    OSTEP virtualization 进程 process 进程 API 进程 API 相关术语 进程状态 statu 机制:受限直接执行 进程调度:介绍 调度:多级反馈队列 MLFQ 调度:比例 ...

  6. vue项目坑记录：vue项目运行卡在百分之几几几

    今天晚上打着游戏,同事突然叫我拉项目下来运行,我打完就去拉代码了,结果vue项目运行卡在66%不动了,我也是百度一下分享别人怎么解决的文章给他,继续我的游戏! 结果呢? 游戏结束后,我拉代码,还是这个 ...

  7. Fiddler篡改请求和响应数据

    Fiddler标记断点后,我们可以通过篡改请求或响应数据,来模拟客户端请求和服务器响应. 一.打断点的方式 1.1 工具栏设置断点 工具栏勾选断点类型进行断点,路径:Rules->Automat ...

  8. 【Git】01 下载安装（Windows）

    Git 官网地址:[点我访问] https://git-scm.com/ 点击这个电脑自动识别操作系统与系统位数 开始安装 安装的目录不要有中文就行[最好也不要有空格] 算了,直接全选[小孩子才做选择 ...

  9. 【Windows】开放共享目录

    在项目里面做数据迁移时发现,WindowsServer的多个主机可以进行磁盘共享访问 但是自己设置是灰白无法点击的 文件目录共享还是可以进行设置的 1.找到自己需要共享的目录,右键选择[属性],并找到 ...

  10. 【Git】05 分支管理

    查看所有分支: git branch Git将列出所有分支,如果是当前使用的分支,前面会加一个星号表示 创建一个新的分支: git branch 分支名称 创建一个分支并且指向该分支: git che ...