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. tp6 uniapp跨越问题

    自己写一个简单的中间件

  2. PHP易混淆函数的区别及用法汇总（函数和方法的区别）

    1.echo和print的区别PHP中echo和print的功能基本相同(输出),但是两者之间还是有细微差别的.echo输出后没有返回值,但print有返回值,当其执行失败时返回flase.因此可以作 ...

  3. 阶乘-n！_C语言实现

    n! // Code file created by C Code Develop #include "stdio.h" #include "stdlib.h" ...

  4. JMeter While循环控制器应用之遍历获取文件参数

    While循环控制器应用之遍历获取文件参数 by: 授客 QQ:1033553122 测试环境 JMeter-5.4.1 应用 实现单线程在单次迭代内遍历获取文件参数 说明:上图仅给出关键配置信息 注 ...

  5. 一步一步分析HTTPS加密机制

    一步一步分析HTTPS加密机制 HTTPS(SSL/TLS)的加密机制虽然是大家都应了解的基本知识, 但是更多的时候我们只是在背诵一些概念, 比如: "对称加密", "非 ...

  6. python adb 安卓app性能测试

    主要是进行cpu.内存.冷启动.热启动.流量.电量的监测 可获取到相关数据,同竞类产品对比,或者同版本对比 cpustatus adb命令:adb shell "dumpsys cpuinf ...

  7. Jmeter函数助手21-evalVar

    evalVar函数用于执行变量表达式. 变量的名称:填入变量的名称name.注意不是引用变量${name} 1.evalVar函数和eval函数的区别:evalVar只能接收变量名称:eval能接收引 ...

  8. 对比python学julia（第一章）--（第三节）山巅一寺一壶酒

    在小学阶段背过圆周率的同学对这节的标题应该不陌生.π(3.14159-)是大家熟悉的普通无理数,但也是非常神秘的一组数字,例如几个世纪以来,埃及考古学家和神秘主义追随者一直痴迷于胡夫金字塔暗藏的圆周率 ...

  9. 人形机器人从人类演示（demenstration）数据中学习人类行为（behavior）的几种方式

    人形机器人从人类演示(demenstration)数据中学习的几种方式 使用仿真环境,在仿真环境中生成近似人类的行为数据,然后利用仿真生成的数据训练机器人. 该种方式最为传统,也最为易行,但是由于仿真 ...

  10. 电脑时间不同步导致的上网报错：core/proxy/vmess/encoding: failed to read response header > websocket: close 1006 (abnormal closure): unexpected EOF

    报错内容: 2023/12/16 14:08:56 [Warning] [775541588] xxxxx.com/core/app/proxyman/outbound: failed to proc ...