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. [oeasy]python0139_尝试捕获异常_ try_except_traceback

                                                          - 不但要有自己的报错 - 还要保留系统的报错 - 有可能吗? ​ ### 保留报错 ​ ! ...

  2. GIS前沿技术

    无论是初步接触到GIS的学生,还是对GIS已经有一定的了解的从业者,肯定都非常关心两个问题:GIS有没有发展前景,GIS有哪些应用价值? 关于这两个问题,笔者的答案是GIS作为一门融合了空间数据采集. ...

  3. Django model 层之Making Query总结

    Django model 层之Making Query总结 by:授客 QQ:1033553122 实践环境 Python版本:python-3.4.0.amd64 下载地址:https://www. ...

  4. Golang 高性能 Websocket 库 gws 使用与设计（一）

    前言 大家好这里是,白泽,这期分析一下 golang 开源高性能 websocket 库 gws. 视频讲解请关注B站:白泽talk 介绍 gws:https://github.com/lxzan/g ...

  5. 用jacoco统计JAVA项目测试代码覆盖率

    一.概述 Jacoco 统计的是全量代码覆盖率.它不仅支持生成单元测试的覆盖率,也支持监控生成接口测试,功能测试的覆盖率. 在新一代精准测试技术流的影响中,各大型单位对覆盖率的追求越来越迫切.作为一款 ...

  6. .NET 高性能缓冲队列实现 BufferQueue

    目录 前言 适用场景 功能说明 使用示例 BufferQueue 内部设计概述 Topic 的隔离 Partition 的设计 对并发的支持 Partition 的动态扩容 Segment 的回收机制 ...

  7. FusionAccess liteAD

    回车回车 fusion access完成 进入access网页 https://IP:8443进入web网页 输入用户名:admin:密码:IaaS@PORTAL-CLOUD8! 输入完账号密码后改密 ...

  8. Jmeter函数助手5-RandomFromMultipleVars

    RandomFromMultipleVars函数用于获取指定变量的随机变量值. Source Variable(s) (use | as separator):传入指定的变量名称,这里的变量可以是单值 ...

  9. 【Android】构建Android12项目报错

    报错信息: Installed Build Tools revision 31.0.0 is corrupted. Remove and install again using the SDK Man ...

  10. ECMO（体外膜氧合）的使用费用为什么会这么高？

    给一个大致的费用: 相关: https://www.bilibili.com/video/BV1rc411H7uT/ https://haokan.baidu.com/v?pd=wisenatural ...