居中固定元素，但水平滚动 [英] Centering a fixed element, but scroll it horizontally

问题描述

有一些问题让这个工作。 PLEEEEEEASE帮助。

Having some issues getting this to work. PLEEEEEEASE help.

我想要一个元素固定在视口顶部，当用户向下滚动页面时，它保留在视口顶部... easy 。如果窗口比960px窄，水平滚动条出现。如果窗口水平滚动我想要这个固定元素内的内容与它滚动。

I would like an element fixed to the top of the viewport, when the user scrolls down the page it remains at the top of the viewport... easy. If the window is narrower then 960px the horizontal scrollbars appear. If the window is scrolled horizontally I would like the content inside this fixed element to scroll with it.

请查看演示，两个绿色框应始终排列。让你的窗口变窄，滚动屏幕，注意他们不再排队。

Please check out the demo, the two green boxes should always line up. Make your window narrow and scroll horiz, notice how they no longer line up.

没有JavaScript，这可能吗？应该在IE7 +中工作，而不是在IE6中完全中断。

Is this possible without JavaScript? Should work in IE7+ and not totally break in IE6.

http://www.louiswalch.com/beta/t/_scrolltest4.html

推荐答案

啊，有趣的问题。我不认为你可以实现没有JavaScript。

Ah, interesting question. I don’t think you can achieve that without JavaScript.

position：fixed 到视口。你想垂直，但你不想水平。我不认为有什么办法在CSS中实现。

position: fixed means that the element is positioned relative to the viewport. You want that vertically, but you don’t want it horizontally. I don’t think there’s any way to achieve that in CSS.

这篇关于居中固定元素，但水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！