当前位置：文江博客话题详情

如何制作“固定”元素可滚动

发布于 2025-01-07 22:50:02 字数 604 浏览 0 评论 0原文

我知道这听起来有点违反直觉，但让我解释一下我想要做什么。

我有一个大元素作为背景。它不会调整大小。它通常比观看它的屏幕大。该元素的大部分内容（它只是一个图像）都位于中心附近。假设唯一必要的信息位于中间 800 像素，而整个内容的宽度为 1600 像素。

为什么它比必要的更宽？因为它会令人愉快地消失在背景的其余部分中，并增加了网站的设计。

所以我固定了该元素并使用标准技巧将其居中。它在大显示器上完美运行。它保持居中，如果其中一些太大，它不允许您滚动以查看基本上什么都没有的内容。我喜欢这样。

但如果屏幕太小，你就看不到全部。您不能只设置页面的最小宽度或最小高度，因为当您滚动时，背景图像会保持在原位，因为它是固定的。

如果有一种方法可以让固定元素在页面滚动时实际上与其他所有元素一起移动，那就完美了，因为我可以将最小宽度指定为图像所需元素的大小。那会非常有效。

否则，另一种解决方案是使用某种其他形式的定位，以防止滚动查看整个内容。然后，我可以再次设置整体的最小宽度，这将允许我准确设置有多少内容是可滚动的。

这有可能吗？我觉得我错过了一些简单的东西。理想情况下，我不必调整任何图像的大小，提供多个 css 表，或使用任何复杂的 javascript 或类似的东西。感谢您的帮助！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鱼窥荷 2025-01-14 22:50:02

经过大量的实验，我终于解决了这个问题，而且解决方案是基本的CSS，这太棒了。

我详细说明了此解决方案在我的博客。或者，这里是工作演示。

HTML

<body>
 <div id="box">
  <div id="element"></div>
 </div>
</body>

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>

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.

HTML

<body>
 <div id="box">
  <div id="element"></div>
 </div>
</body>

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>

回复收藏 0 原文

長街聽風 2025-01-14 22:50:02

我知道你不喜欢使用复杂的 javascript...JQuery 库允许用最少的代码对类似的事情进行一些很棒的小修复...你也可以使用一个相对较小的片段而不使用 jquery...基本上所有你需要做的是为 window.scroll 设置一个事件侦听器，并设置你的fixedElement.scrollTop 来匹配...

快速 JQuery 示例：

$(window).scroll(function(){
  $('#fixedBackground')[0].scrollTop=$(window).scrollTop();
});

I know you would prefer not to use elaborate javascript.... the JQuery library allows for some great little fixes to things like this with a minimum of code... you could also use a relatively small snippet without jquery... basically all you need to do is set an event listener for window.scroll and set your fixedElement.scrollTop to match...

quick JQuery example:

$(window).scroll(function(){
  $('#fixedBackground')[0].scrollTop=$(window).scrollTop();
});

回复收藏 0 原文

不忘初心 2025-01-14 22:50:02

我不确定我确切地知道你想要做什么，但下面的 css 片段可能会对你有所帮助。没有把握。

 body{ background-image:url(../images/bgImage.png); 
 background-attachment:scroll; background-position:center top;
 background-repeat:no-repeat; margin-top:0px; margin-bottom:0px;}

您可以使用该代码段中属性的任意组合来设置您的定位，并且 background-attachment 使其可滚动。

如果您发布了您当前拥有的 CSS，这将会很有帮助，这样我们就能真正帮助您。让我知道是否可以说得更清楚。

I am not CERTAIN I know exactly what you are wanting to do but the below snippet of css might help you. Not sure.

 body{ background-image:url(../images/bgImage.png); 
 background-attachment:scroll; background-position:center top;
 background-repeat:no-repeat; margin-top:0px; margin-bottom:0px;}

You can set up your positioning using any combination of the attributes in that snippet and the background-attachment is what makes it scrollable.

It would be helpful if you posted your css for what you have currently so we could really help you. Let me know if I can be more clear.

回复收藏 0 原文

~没有更多了~