简体   繁体   English

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

[英]Fixed position in only one direction in future releases of CSS?

I know CSS is not supporting position: fixed for only x or y but only for both a the same time. 我知道CSS不支持该position: fixed仅针对xy进行了position: fixed ,但仅针对同一时间进行了固定。

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. 解决此问题的常用方法似乎是将固定定位与jquery结合使用,以相对于非固定轴上的滚动量重新定位组件。 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? 我的问题是,这是否是将来CSS规范所关注的问题? Anyone know? 有人知道吗

I think we need a fixed-x and and fixed-y positioning value. 我认为我们需要一个fixed-xfixed-y定位值。

This is especially becoming a problem now with touch devices where scrolling in both dimensions are more common. 现在对于在二维上滚动更为普遍的触摸设备而言,这尤其成为问题。

Here's a fiddle: 这是一个小提琴:

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

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 : 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 更新2

To clarify my app is basically a grid with scroll-overflow in both x and y (like Excel). 为了澄清我的应用程序,基本上是一个在x和y中都具有滚动溢出的网格(例如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. 我想要固定x / flow-y和固定y / flow-x这两者。 And the problem again: With lots of labels this makes scrolling very laggy using the jquery-solution. 问题又来了:使用很多标签,这使得使用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 =) Maybee我是唯一想要这个的人)

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. 快速浏览一些CSSWG注释(例如注释)使我相信该position: sticky可能是此问题的潜在解决方案,只要您仅指定要固定元素的轴上的偏移量即可。

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. 当然,没有太多信息和实现可用来验证任何一种方法-我只是作一个有根据的猜测,而我链接到的文档是ED,不宜作为一般参考-但您可以随时询问www-style邮件列表 ,看看那里的好人怎么说。 I haven't experimented enough with position: sticky to be able to comment further myself. 我还没有对position: sticky进行足够的实验position: sticky能够自己发表更多评论。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM