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. 利用opencv库使用Python将视频逐帧转为图片

    做成型的语义分割软件需要,写了一个,在博客记录一下 import cv2 def video2pic(videoFile, outputFile): vc = cv2.VideoCapture(vid ...

  2. element-plus如何隐藏el-row

    在 Element Plus 中,el-row 是用于布局的组件,如果你想要隐藏 el-row,你可以使用 CSS 的 display 属性将其设置为 none.以下是一个简单的示例: <tem ...

  3. vb.net 实现excel导入的时候滚动显示导入的数据

    如果你想在 Excel 导入过程中滚动显示导入的数据,可以使用逐行读取 Excel 数据并在滚动窗口中显示. 在 VB.NET 中,你可以使用 Excel.Range 对象逐行读取 Excel 数据, ...

  4. [项目自荐] 交叉编译njs并使用Nginx搭建自由的个人网盘：vList5

    这个博客好久没有打理了,最近才想起来 这篇文章是以下 5 篇文章的组合,希望这个免费的项目能实现他的初衷吧 vList5:部署指南 vList5.3 全面加密,从我做起 njs 从入门(交叉编译)到入 ...

  5. 双指针 & 双向搜索

    双指针 根据人类直觉这个东西需要满足单调性,所以预处理的时候大概率需要排序. 好像常与二分结合使用? 可以用在序列.链表(存储位置)或者树.图上(存储结点). 或者用于其他算法(eg:单调队列.差分) ...

  6. c++17 structure binding test

    1 /*test for struct binding*/ 2 3 #include <string> 4 #include <iostream> 5 using namesp ...

  7. 提高 C# 的生产力：C# 13 更新完全指南

    前言 预计在 2024 年 11 月,C# 13 将与 .NET 9 一起正式发布.今年的 C# 更新主要集中在 ref struct 上进行了许多改进,并添加了许多有助于进一步提高生产力的便利功能. ...

  8. python与c/java的异

    1.注释 #为单行注释 """ 这里是多行注释 """ ''' 这个也可以是多行注释 ''' 2.赋值 在python中赋值不需要特定变量的 ...

  9. python面向对象游戏练习：好人坏人手枪手榴弹

    python面向对象游戏练习:好人坏人手枪手榴弹 主要是多态的练习,对象作为参数传给方法使用 1 #!/usr/bin/env python 2 # -*- coding:utf-8 -*- 3 4 ...

  10. Hession-free 的共轭梯度法的高效计算版本的部分代码（pytorch实现，实现一阶求导的一次计算重复使用）

    Hession-free 的共轭梯度法的高效计算版本的部分代码(pytorch实现,实现一阶求导的一次计算重复使用) Hession-free 的共轭梯度法在求解 H*v 的时候是先求一阶导,即雅可比 ...