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. 将传统应用带入浏览器的开源先锋「GitHub 热点速览」

    现代浏览器已经不再是简单的浏览网页的工具,其潜能正在通过技术不断地被挖掘和扩展.得益于 WebAssembly 等技术的出现,让浏览器能够以接近原生的速度执行非 JavaScript 语言编写的程序, ...

  2. 2023 CSP 游记

    目录 \(\text{CSP-J}\) 游记 \(\text{CSP-S}\) 游记 \(\text{CSP-J}\) 游记 省流:\(\text{B}\) 题挂了 \(100\text{ pts}\ ...

  3. ComfyUI进阶：Comfyroll插件 (五)

    ComfyUI进阶:Comfyroll插件 (五) 前言: 学习ComfyUI是一场持久战,而Comfyroll 是一款功能强大的自定义节点集合,专为 ComfyUI 用户打造,旨在提供更加丰富和专业 ...

  4. C# RSA加密解密及RSA签名和验证

    1.RSA加密解密 (1)获取密钥,这里是产生密钥,实际应用中可以从各种存储介质上读取密钥 (2)加密 (3)解密 2.RSA签名和验证 (1)获取密钥,这里是产生密钥,实际应用中可以从各种存储介质上 ...

  5. 假期小结4hive学习beeline

    学习Beeline是连接和管理Hive的一种有效方式.Beeline是一个用于与Hive交互的命令行工具,它支持通过JDBC连接到Hive服务器,并执行查询和管理Hive表等操作. 以下是一些关于Be ...

  6. M1 Mac安装anaconda3

    1.正常安装 首先进入官网https://www.anaconda.com/ 下载,安装 自行大胆的安装 2.环境配置 直接安装完成后,代码文件的存储路径为默认路径,为了更好的管理代码文件我们需要更换 ...

  7. 第一讲：日志系统：一条sql更新语句是如何执行的？

    目录 第一讲:日志系统:一条sql更新语句是如何执行的? 回顾 抛出问题: 提出思路: 重要的日志模块:redo log 重要的日志模块:binlog 为什么会有两份日志呢? 这两种日志有以下三点不同 ...

  8. 【Big Data】 DBeaver连接Phoenix

    前言 Phoenix是Hbase数据库的一个SQL化中间件 Hbase本身是一个NoSQL类型的列族库,Phoenix可以将其转换成SQL操作 Phoenix提供的客户端Jar包,可以让DBeaver ...

  9. 【SpringMVC】03 使用注解

    第一步还是配置web.xml,使用分发器统一处理请求和加载容器文件 <?xml version="1.0" encoding="UTF-8"?> & ...

  10. 记录实验室深度学习服务器显卡硬件故障的排查——RmInitAdapter failed! rm_init_adapter failed

    实验室突然通知我说是深度学习的服务器无法查看GPU,并且在GPU上运行的程序也halt on,需要解决.于是查询服务器的运行日志得到下面的信息: Nov 10 01:33:23 dell kernel ...