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. 史上最详细的Composer安装tp5教程

    Composer安装tp5教程1.下载composer先介绍几个网站Composer官网https://getcomposer.org/ Composer中文网http://www.phpcompos ...

  2. [oeasy]python0025_ 顺序执行过程_流水_流程_执行次序

    顺序执行过程_流水_流程_执行次序 回忆上次内容 上次 熟悉了 vim编辑器 操作 作用 w 向前移动光标一个word b 向后移动光标一个word :r oeasy.py 读取文件到当前文件缓存 g ...

  3. oeasy教您玩转vim - 28 - 水平移动

    ​ 水平移动 回忆上节课内容 根据扩展名我们可以设置某些特定类型文件的配置 相关文件类型的设置放在相应的文件夹里 文件类型缩进文件夹 /usr/share/vim/vim81/indent/ 文件类型 ...

  4. Java 网络编程（TCP编程 和 UDP编程）

    1. Java 网络编程(TCP编程 和 UDP编程) @ 目录 1. Java 网络编程(TCP编程 和 UDP编程) 2. 网络编程的概念 3. IP 地址 3.1 IP地址相关的:域名与DNS ...

  5. PowerShell 使用 Azure

    PowerShell 使用 Azure Azure 提供了三种管理工具: Azure 门户:Azure 门户是一个网站,可在其中创建.配置和更改 Azure 订阅中的资源,该门户是一个图形用户界面 ( ...

  6. 广州大学第十八届ACM大学生程序设计竞赛（同步赛）——题解

    这套题我答的很失败.没有按照题目的难度去答题,前期浪费了不少时间. 题目: A-字符画 题解:思维.模拟.这道题我的通过率为62.5,没有过的原因是因为对细节的处理和把控不到位,对一些点忽视,我也记录 ...

  7. Vue 中引用第三方js总结

    vue中引用第三方js总结 By:授客 QQ:1033553122 实践环境 win10 Vue 2.9.6 本文以引用jsmind为例,讲解怎么在vue中引用第三方js类库 基础示例 1.把下载好的 ...

  8. 关于druid与springboot版本问题

    datasource: druid: driver-class-name: ${sky.datasource.driver-class-name} url: jdbc:mysql://${sky.da ...

  9. linux学习（7）：Linux最常用150个命令汇总

    Linux最常用150个命令汇总 线上查询及帮助命令(2个) man 查看命令帮助,命令的词典,更复杂的还有info,但不常用. help 查看Linux内置命令的帮助,比如cd命令. 文件和目录操作 ...

  10. 【Mybatis-Plus】01 快速上手

    [官网快速上手地址] https://mp.baomidou.com/guide/quick-start.html#%E5%88%9D%E5%A7%8B%E5%8C%96%E5%B7%A5%E7%A8 ...