在未来的CSS版本中只固定一个方向的位置？ [英] Fixed position in only one direction in future releases of CSS?
问题描述
我知道CSS只支持 x 或 y
解决这个问题的常用方法似乎是将固定位置与jquery结合使用，将部件相对于非固定轴上的滚动量进行定位。这个缺点是，在这个方向滚动时，组件会滞后很多。
我的问题是，如果这是一个正在考虑未来CSS规范的问题？任何人都知道吗？
我认为我们需要一个 fixed-x 和and fixed-y 定位值。
在触控设备中，这两个维度的滚动更为普遍，这尤其成为问题。
这是一个小提琴：
它显示我之后的事情，但不是实际的问题，因为这个非常小的例子现在看起来非常快。
更新
从 CSS ED ：
< blockquote>
粘性定位元素和
的底部之间的交点粘性约束矩形限制任何方向的移动，所以
偏移量永远不会将粘性定位元素推到其外部
包含区块。然而，当页面被滚动时，当元素可以在其
包含块内自由移动时，它似乎被固定到
相关的流根边缘，类似于固定位置元素
我认为这是描述我想要的，但我不确定......
更新2
为了说明我的应用基本上是一个在x和y像Excel）。我想要的是一些标签在滚动视图时在一个方向上粘在边缘上，但同时保持正常流向相反方向。我希望对于fixed-x / flow-y和fixed-y / flow-x都是这样。再次问题：使用jQuery解决方案时，使用大量标签会导致滚动非常缓慢。我认为我们错过了一个选择，只能在一个维度上修复组件，并且仍然在另一维中流动。也许我是唯一一个想要这样做的人）
快速浏览一些CSSWG笔记，例如这一个让我相信 position：sticky 可能是这个问题的一个可能的解决方案，只要你在你想要的元素被固定的轴上指定偏移量即可。
有一点但是，担心的是：与被认为是绝对定位的固定元素不同，粘性元素相对于其包含的块开始。由于相对定位的元素不会被从正常流程中取出，所以您必须考虑与您的元素相同的流程中的其他元素的布局等等，并且（因此？）强制元素的行为像它的固定无论滚动位置如何，可能会更困难一些。
当然，有太多的信息和实现可用于验证任何这些 - 我只是提供一个知情猜测，我链接到的文件是一个教育署不是一般参考 - 但你总是可以问问 position：sticky 来进一步评论我自己。
I know CSS is not supporting position: fixed for only x or y but only for both a the same time.
The common approach to solve this seem to be to use fixed positioning in combination with jquery to re-position the component with respect to the scroll amount in the non-fixed axis. The downside with this is that the component will lag a lot when scrolling in this direction.
My question is if this is a problem that is being looked at for future specs of CSS? Anyone know?
I think we need a fixed-x and and fixed-y positioning value.
This is especially becoming a problem now with touch devices where scrolling in both dimensions are more common.
Here's a fiddle:
which shows what I'm after but not the actual problem because this very small example is very fast as it looks now.
Update
From the CSS ED:
Intersection between the stickily positioned element and the bottom of the sticky-constraint rectangle limits movement in any direction, so the offset never pushes the stickily positioned element outside of its containing block. However, when the element is free to move within its containing block as the page is scrolled, it appears to be pinned to the relevant flow root edges, similarly to a fixed position element.
I think this is describing what I want but I'm not sure...
Update 2
To clarify my app is basically a grid with scroll-overflow in both x and y (like Excel). What I want is some labels to stick at the edges in one directionwhen being scrolled out of view but at the same time stay in the normal flow in the opposite direction. I want this for both fixed-x/flow-y and fixed-y/flow-x. And the problem again: With lots of labels this makes scrolling very laggy using the jquery-solution. I think we are missing an option to make components fix in only one dimension and still flow in the other. Maybee I'm the only one wanting this =)
A quick skim through some CSSWG notes such as this one leads me to believe that position: sticky might be a potential solution to this problem, provided you only specify the offsets on the axis you want the element to be fixed.
There is a point of concern though: unlike a fixed element which is considered absolutely positioned, a sticky element starts out relative to its containing block. Since relatively-positioned elements are not taken out of the normal flow, you will have to account for the layout of other elements in the same flow as your element, among other things, and (thus?) forcing the element to act like it's fixed regardless of scroll position may be a little more difficult.
Of course, there is too little information and implementation available to verify any of this — I'm just making an informed guess, and the document I link to is an ED not meant for general reference — but you can always ask the www-style mailing list and see what the good folks there have to say. I haven't experimented enough with position: sticky to be able to comment further myself.
这篇关于在未来的CSS版本中只固定一个方向的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
