如何使“固定”元素可滚动 [英] How to make a "Fixed" element Scrollable
问题描述
我知道这听起来有些违反直觉，但让我解释一下我想要做什么。
I know this sounds somewhat counterintuitive, but let me explain what I am trying to do.
我有一个大的元素作为背景。它不调整大小。它通常大于被浏览的屏幕。这个元素的大部分内容（它只是一个图像）靠近中心。让我们说，唯一的NECESSARY信息是在中间的800px，整个东西是1600px宽。
I have a large element that serves as the background. It does not resize. It is often larger than the screen it is viewed on. Most of the content of this element (it's just an image) is near the center. Let's say that the only NECESSARY information is in the middle 800px, and the whole thing is 1600px wide.
为什么它比必要的更宽？因为它令人愉快地退化到其余的背景，并添加到网站的设计。
Why is it wider than necessary? Because it fades pleasingly into the rest of the background and adds to the design of the site.
所以我使元素固定，并使用一个标准的把戏中心它。它在一个大型显示器上工作得很好。它保持中心，如果它的一些有点太大，它不允许你滚动，以查看什么是基本上什么。我喜欢这个。
So I made the element fixed and used a standard trick to center it. It works perfectly on a large monitor. It stays centered, if some of it is a little too big, it doesn't allow you to scroll over in order to see what is basically nothing. I like that.
但是如果屏幕太小，你看不到这一切。您不能只设置网页的最小宽度或最小高度，因为当您滚动时，背景图片会保持原位，因为它是固定的。
But if the screen is too small, you can't see it all. You can't just set the min-width or min-height of the page because when you go to scroll, the background image stays in place, because it is fixed.
如果有一种方法让一个固定的元素实际上与其他一切移动时页面滚动，这将工作完美，因为我可以指定最小宽度为所需的图像元素的大小。这将工作得很好。
If there was a way to have a fixed element actually move with everything else when the page is scrolled, that would work perfectly, because I could specify the min-width to the size of the required elements of the image. That would work very well.
否则，另一个解决方案是使用一些其他形式的定位，允许防止能够滚动看到整个事情。然后，再次，我可以只设置整个与最小宽度，这将允许我准确设置多少内容可滚动。
Otherwise, another solution would be to use some other form of positioning that allows for the prevention of being able to scroll to see the whole thing. Then, again, I could just set the whole with a minimum width, which would allow me to set exactly how much of the content is scrollable.
这是可能的？我觉得我缺少一些简单的东西。理想情况下，我不需要调整任何图像的大小，提供多个css工作表，或使用任何精心编写的javascript或任何类似的东西。感谢您的帮助！
Is any of this possible? I feel like I am missing something simple. Ideally I would not have to resize any images, serve up multiple css sheets, or use any elaborate javascript or anything like that. Thanks for the help!
推荐答案
我已经终于解决了这个问题，经过一吨实验，解决方案证明是基本的CSS ，这是真棒。
I have finally solved this problem after a ton of experimentation and the solution turned out to be basic CSS, which is awesome.
I go into great detail illustrating this solution at my blog. Alternatively, here is the working demo.
<body>
<div id="box">
<div id="element"></div>
</div>
</body>
CSS
CSS
<style type="text/css">
html, body {
height:100%;
}
body {
margin:0px;
padding:0px;
min-width:1000px; /*Set the width you want to be able to scroll to here*/
}
#element {
height:100%;
position:relative; /*This section centers your element*/
left:50%;
margin-left:-800px; /*Half the width of the image*/
z-index:-9999; /*This part puts it behind everything, not needed if you aren't making a background*/
background:url(image.jpg) no-repeat;
}
#box {
height:100%;
min-height:700px; /*Set the height you want to be able to scroll to here*/
overflow:hidden; /*Needed due to centering with margins*/
}
</style>
这篇关于如何使“固定”元素可滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
