如何同时制作 2 个 div 的滚动条答案

【问题标题】：How can I make 2 div's scroll at the same time如何同时制作 2 个 div 的滚动条
【发布时间】：2011-08-31 11:09:50
【问题描述】：

对于我的网站设计，我有一个 <div class="stuffhere"></div> 来存储内容。这些div有2个。第二个在第一个之前，在z-index:的帮助下，两个stuffhere标签中的内容也是重复的，但有时顶层stuffhere中的图像被替换为间隔。

我可以用一张图片来最好地描述这种设置的原因。

更新：（新图片！） how my code renders the page http://img5.imageshack.us/img5/8246/portfolio4.png

注意 Casey 网页设计图像 不受条纹背景的影响，而其他块则受到影响。 Casey 网页设计图片是屏幕截图中唯一没有被背景着色的元素。

这是因为 back div 中的元素带有条纹背景，而 front div 中的元素则没有。

背面 div 的不透明度为 0.55，带有条纹背景。由于前面的 div 没有背景并且不透明度为 1，因此它的内容不受条纹背景的影响，因此它没有着色。是的，它确实着色。我可以用另一张图片来说明这一点。

在下面的相同代码快照中，再次向您展示它，您将看到某些图像相互重叠。一个很好的例子是work_title_heroesforhire.png 和work_title_heroesforhire-F.png

这是为什么？

下面是没有F后缀的图片。它被放置在背面层中，因此会受到不透明度的影响。

下面是带F后缀的图片。它不受不透明度影响，因为它位于front layer。

这就是截图中的文字没有条纹背景的原因。

现在您了解了我的设计是如何工作的，问题就在这里。当我滚动时，会发生这种情况......

如何同时制作 2 个 div 的滚动条？有没有办法可以将 2 个 div 的滚动与 javascript 同步？ JQuery 更可取。

更新 Working example webpage you can look at

【问题讨论】：

可能只有我一个人，但我仍然对这里发生的事情和问题所在感到非常迷茫。不过很明显，您希望 2 个单独的 div 同时滚动.但是，由于原因尚不清楚，我真的不明白你为什么想要/需要那个。
是的，您可以同时制作 2 个 div 的滚动条。我认为最好展示一个工作示例或/和一些代码。然后是那些截图。我觉得很难理解你到底想做什么
虽然我没有看到不透明度与滚动有什么关系，但是滚动页面时主页布局保持原位的问题是什么？这听起来更像是一个 CSS 错误（position:fixed 而不是position:absolute）。
我上传了一个工作示例供您查看，因此您会明白为什么我需要同时滚动 div。 desbest.uk.to/work.html
@Juhana 如果您查看我发布的示例并尝试滚动，您就会明白为什么我需要同时滚动两个 div。不透明度与滚动无关，你是对的。但是在我的页面上，不透明度为 0.55 的 div 在后面 被背景着色；而在 前面的 div 上，图像是白色文本，没有被背景着色。 desbest.uk.to/work.html div 前后 内的元素在同一位置重复，有时用div 前部 中的空格代替。

标签： jquery css html scroll

【解决方案1】：

这是一个将底部 div 动态定位在顶部 div 后面的示例，当您滚动顶部 div 时，底部 div 会动态滚动。

<html>
    <head>
        <title>Test</title>
        <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
        <script>
            $(document).ready(function(){
                var topdivPos = $("#topdiv").position();
                $("#bottomDiv").css("position","absolute").css("top",topdivPos.top).css("left",topdivPos.left).show();
                $("#topdiv").scroll(function(){
                    $("#bottomDiv").scrollTop($("#topdiv").scrollTop());
                });
            });
        </script>
    </head>
    <body>
        <div id="topdiv" style="width:300; height:100; overflow:auto">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
        </div>
        <div id="bottomDiv" style="display:none;width:300; height:100; overflow:auto;z-index:-100">
            <img src="http://www.pixtual.com/wallpaper/Pixtual-10-3-2008.png"/>
        </div>
    </body>
</html>

【讨论】：

我希望底部 div 的位置与顶部 div 的位置相同，因此位置是同步的。我该怎么做？