在未来的CSS版本中,仅在一个方向上固定位置?

时间:2013-10-21 15:13:37

标签: javascript html css user-interface

我知道CSS不仅仅position: fixedx支持y,而且只支持同时进行。{/ p>

解决这个问题的常用方法似乎是使用固定定位结合jquery来重新定位组件相对于非固定轴中的滚动量。这样做的缺点是当向这个方向滚动时,组件会滞后很多。

我的问题是,如果这是一个正在考虑未来CSS规范的问题?有人知道吗?

我认为我们需要fixed-xfixed-y定位值。

现在触摸设备尤其成为一个问题,其中两个尺寸的滚动更为常见。

这是一个小提琴:

http://jsfiddle.net/UfZPa/1/

显示我之后的内容,但不是实际问题,因为这个非常小的例子现在非常快。

更新

来自CSS ED

  

粘性定位元素与底部之间的交点   粘性约束矩形限制任何方向的移动,所以   偏移永远不会将粘性定位元素推到其外部   包含块。 然而,当元素在其中自由移动时   当页面滚动时包含块,它似乎被固定   相关的流根边缘,类似于固定的位置元素

我认为这是描述我想要的,但我不确定......

更新2

澄清我的应用程序基本上是一个在x和y都有滚动溢出的网格(如Excel)。我想要的是一些标签在滚动出视图时在一个方向上粘在边缘,但同时保持在相反方向的正常流动。我想要这个用于fixed-x / flow-y和fixed-y / flow-x。问题再次出现:使用大量标签时,使用jquery解决方案会使滚动变得非常滞后。我认为我们缺少一个选项,只能在一个维度上修复组件并且仍然在另一个维度中流动。也许我是唯一一个想要这个=)

的人

1 个答案:

答案 0 :(得分:4)

快速浏览一些CSSWG注意事项,例如this one,让我相信position: sticky可能是此问题的潜在解决方案,前提是您只需指定您想要元素的轴上的偏移量修好。

但有一点值得关注:与被认为绝对定位的固定元素不同,粘性元素相对于其包含块开始。由于相对定位的元素不会从正常流中取出,因此您必须考虑与元素相同的流中的其他元素的布局,以及(因此?)强制元素按其固定的方式运行无论滚动位置如何都可能有点困难。

当然,有太少的信息和实施可用于验证这一点 - 我只是做出了明智的猜测,而我链接到的文件是一个不用于一般性参考的ED - 但你可以随时询问www-style mailing list并看看那些好人们有什么话要说。我没有对position: sticky进行足够的实验以便能够进一步评论。