我知道CSS不仅仅position: fixed
或x
支持y
,而且只支持同时进行。{/ p>
解决这个问题的常用方法似乎是使用固定定位结合jquery来重新定位组件相对于非固定轴中的滚动量。这样做的缺点是当向这个方向滚动时,组件会滞后很多。
我的问题是,如果这是一个正在考虑未来CSS规范的问题?有人知道吗?
我认为我们需要fixed-x
和fixed-y
定位值。
现在触摸设备尤其成为一个问题,其中两个尺寸的滚动更为常见。
这是一个小提琴:
显示我之后的内容,但不是实际问题,因为这个非常小的例子现在非常快。
更新
来自CSS ED:
粘性定位元素与底部之间的交点 粘性约束矩形限制任何方向的移动,所以 偏移永远不会将粘性定位元素推到其外部 包含块。 然而,当元素在其中自由移动时 当页面滚动时包含块,它似乎被固定 相关的流根边缘,类似于固定的位置元素。
我认为这是描述我想要的,但我不确定......
更新2
澄清我的应用程序基本上是一个在x和y都有滚动溢出的网格(如Excel)。我想要的是一些标签在滚动出视图时在一个方向上粘在边缘,但同时保持在相反方向的正常流动。我想要这个用于fixed-x / flow-y和fixed-y / flow-x。问题再次出现:使用大量标签时,使用jquery解决方案会使滚动变得非常滞后。我认为我们缺少一个选项,只能在一个维度上修复组件并且仍然在另一个维度中流动。也许我是唯一一个想要这个=)
的人答案 0 :(得分:4)
快速浏览一些CSSWG注意事项,例如this one,让我相信position: sticky
可能是此问题的潜在解决方案,前提是您只需指定您想要元素的轴上的偏移量修好。
但有一点值得关注:与被认为绝对定位的固定元素不同,粘性元素相对于其包含块开始。由于相对定位的元素不会从正常流中取出,因此您必须考虑与元素相同的流中的其他元素的布局,以及(因此?)强制元素按其固定的方式运行无论滚动位置如何都可能有点困难。
当然,有太少的信息和实施可用于验证这一点 - 我只是做出了明智的猜测,而我链接到的文件是一个不用于一般性参考的ED - 但你可以随时询问www-style mailing list并看看那些好人们有什么话要说。我没有对position: sticky
进行足够的实验以便能够进一步评论。