Angular 学习笔记 (Material table sticky 原理)
更新 : 2019-12-03
今天踩坑了, sticky 了解不够深
refer
http://www.ruanyifeng.com/blog/2019/11/css-position.html 阮一峰 sticky
https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46 避坑.
sticky 的原理类似动态的 relation + fixed
然后又多了一个 max area in container 的概念.
一定要记得, sticky 的 parent 就是 sticky container, 它的 max area 尤其重要。
有些时候我们需要 div depend on parent or viewport 我们会 set 100%
这个时候如果 div 不是 scroll container 的话,那么通常就用不了 sticky left right 了。
因为一旦 sticky container 依赖 parent width 那么它就不可能依赖内容. 在做 table + paginator 的时候就会遇到这种场景. table row 不依赖 parent width 但是 paginatior 通常
需要 width 100%
sticky 就是一个东西会一直保持在可见范围
table 的 header 在 scroll 的时候一直贴在上方, column 一直贴在左右.
这种体验以前是很难实现的。
需要监听 scroll 然后去定位.
有了 sticky 我们就不需要去监听 scroll 了.
但是 sticky 也有不能满足的场景. 比如当有 2 个 element 需要被 sticky 的时候. 我们的 top value 就要计算了
比如有 a, b 两个 element
当 2 个都要 sticky 的时候, top a = 0, top b = a height.
b 依赖与 a 的高度. 这里的难点是我们需要 watch a 的高度,
比较先进的方法是用 Resize Observer
https://drafts.csswg.org/resize-observer/#resize-observer-interface
另一种方法是不使用 sticky,改用监听 scroll + transition
transition 和定位有一个很大的区别就是, transition 在移动后, 原本的位置是保留着的,感觉就像灵魂出窍一样,躯壳依然占据着那个位置.
定位则是整个跳脱了出来,原本的位置就被其它元素替代掉了.
同样的例子.
a, b 都 transition 后, 当 a 的高度变大时, 它的躯壳也跟着变大了,间接的推动了 b element
所以这时候 a 和 b 保持的距离就会时一致的. 用 sticky 的话,这里就会出现重叠的问题了。
这个做法在一种场景下会比上面的好, 就是当你有多个 sticky element 但是它们又刚好是 sibling 的情况下。
如果它们不巧中间有不需要 sticky 的 element, 那么这个方案依然需要监听 height,那么就没有多大的好处了。
总结 :
1. 超过 1 个 element 要 sticky 的话, 就需要前一个的 parent (难度加一点)
2. 超过 1 个 element 同时 element 的 height 会改变 (难度再加)
解决之道,要监听多个 element 的 resize, 然后设置 top value.
refer:
https://developers.google.com/web/updates/2016/10/resizeobserver
最新文章
- CSS3和javascript中的transform
- WPF去边框与webbrowser的冲突
- python第十九天-----Django进阶
- STL 源码分析《1》---- list 归并排序的 迭代版本, 神奇的 STL list sort
- 纯js拖拽参考
- 网络开发库从libuv说到epoll
- Hadoop基础教程之高级编程
- 五大主流SQL数据库
- Linux中的文件描述符与打开文件之间的关系------------每天进步一点点系列
- IPayablebillItf
- Wap touch flispan demo
- 分析JavaScript代码应该放在HTML代码哪个位置比较好
- delphi datasnap 心跳包
- print语句中逗号(,)和反斜杠(\)的区别
- aplication.properties配置
- Django 详解 中间件Middleware
- Java SE之初探反射机制
- day9-复习学习python实例
- screen 命令安装使用
- 将整个文件夹推上github
热门文章
- 替换分隔符 ^p, 或者是回车
- 干货满满!10分钟看懂Docker和K8S(转)
- 超级简单的checkbox赋值,用于记住登陆名
- 安卓 android studio 报错 All flavors must now belong to a named flavor dimension. Learn more at https://d.android.com
- 使用idea创建简单的webservice服务
- Spring Boot应用的打包和部署
- 【源码解析】Flink 是如何处理迟到数据
- Asynchronous Streaming Request Processing in Spring MVC 4.2 + Spring Boot(SpringBoot中处理异步流请求 SpringMvc4.2以上)
- Python - Django - 页面上展示固定的页码数
- AD 常用策略-修改本地管理员密码,禁用非administrator帐户,删除非administrator帐户