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]python0037_字符画艺术_asciiview_自制小动物_imagick_asciiart

    ​ 牛说(cowsay) 回忆上次内容 我们狂飙了一路 从用shell 直接执行 python程序 到用shell 循环执行 python程序 循环体中 把 python的 输出结果 用管道 交给了 ...

  2. Odoo 通过Javascript调用模型中自定义方法

    实践环境 Odoo 14.0-20221212 (Community Edition) 代码实现 在js脚本函数中调用模型中自定义方法: this._rpc({ model: 'demo.wizard ...

  3. 一文详解 JuiceFS 读性能：预读、预取、缓存、FUSE 和对象存储

    在高性能计算场景中,往往采用全闪存架构和内核态并行文件系统,以满足性能要求.随着数据规模的增加和分布式系统集群规模的增加,全闪存的高成本和内核客户端的运维复杂性成为主要挑战. JuiceFS,是一款全 ...

  4. openeuler linux内核4.19安装（centos 同理）

    linux内核安装: 安装内核步骤 下载相应内核版本[我这里用的是linux-4.19.90.tar.gz] 下载网址:https://mirrors.edge.kernel.org/pub/linu ...

  5. 【Vue】MineData 地图接入

    一.文档资料: MineData开放平台: https://minedata.cn/md-platform/login/login MineData V2.1.0 接口文档: http://113.1 ...

  6. 【JavaScript】下滑线命名转驼峰命名处理

    同事写接口返回的JSON属性名称始终不一致,一会下划线一会驼峰 然后自己封装了一个: function toHump(name){ var newName = name.toLowerCase(); ...

  7. NVIDIA Omniverse Audio2Face的安装

    下载 NVIDIA Omniverse 并运行安装程序 - 安装后,打开 Omniverse Launcher - 在"Apps"(应用)部分中找到 Omniverse Audio ...

  8. 如何计算两个正太分布的KL散度 —— 正太分布的KL散度 (Kullback-Leibler divergence) 计算

    参考: https://blog.csdn.net/int_main_Roland/article/details/124650909 给出实现代码: def get_kl(): mean0, log ...

  9. 强化学习运行环境，atari 2600 游戏模拟器，atari-py库 —— 无法运行游戏，pacman，surround，报错: Segmentation fault (core dumped)

    atari2600运行环境: https://github.com/openai/atari-py 安装环境,以及导入 rom文件这里不进行介绍(前文已介绍): 测试游戏环境rom文件能否正常加载如内 ...

  10. QT中TreeWidget树控件的使用

    关于Item Widgets中Tree Widget的使用方法! TreeWidget树控件的使用 创建列表头, 该控件有什么属性 QStringList header_list; header_li ...