子div作为可滚动父级的视口？

Question

这可能会更好地解释我的问题：

我需要将一个子div放在另一个上面，这样最后一个子项只显示在边缘周围，但是两个子div需要一起滚动并保持第一个子div的背景静态。这个视口将是第一个孩子，但第一个和第二个孩子的内容必须在容器内滚动，以便它们可以一起滚动。，第一个孩子是视口。

---

我有以下HTML结构：

<div class="container">
    <div class="text">
        <div class="row">Row</div>
        <div class="row">Row</div>
        <div class="row">Row</div>
        <div class="row">Row</div>
        <div class="row">Row</div>
        <div class="row">Row</div>
    </div>
    <div class="bars">
        <div class="a"></div>
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="b"></div>
        <div class="a"></div>
    </div>
</div>

bars延伸到页面的宽度，text div叠加在它们的顶部，并在其周围留出边距。我将每个bars div定位，使它们在相同的水平位置与视觉对应的row匹配。

text div定位为每边x像素，因此周围有一个边距。这样，您就可以看到它下方bars的末尾。

标记很简单，但我无法为此找出CSS ...

text绝对定位，以便它可以扩展到页面的边界。如果它内部的内容保持在边界内，这很好，但在这种情况下不会。

这很难解释，但基本上，这就是问题：我将container设置为overflow:scroll因为我需要bars使用rows滚动。由于text具有背景图片，并且其位置使您只能看到其下方rows的末尾，因此必须为position:absolute。但是，当内容超出text. I can't add the background image to容器because it would cover the ends of the条形码的范围时，这不起作用。

这有意义吗？没有？这是一个jsFiddle：http://jsfiddle.net/charlescarver/BskaP/2/

它仍然没有意义吗？这是一张图片：

有什么想法吗？问我一些问题所以我可以更好地解释一下。

Answer 1

你不需要很多css - 比如.container。如果我理解正确（并且我不是100％确定我这样做），你会喜欢.text div上的图像，它在页面的其余部分保持固定 - 栏和文本滚动。

您无法将图像放在文本div上，因为它会滚动;相反，我建议将图像放在每个.row上，使用position: fixed以及使用padding-bottom:20px而不是边距，这样所有行后面都会出现一个图像，效果是连续的。这会给你效果我认为你在追求

http://jsfiddle.net/BskaP/5/

Answer 2

您可以使用jQuery＆＃39; scrollTop()函数根据滚动获取元素位置。加上scroll()事件，您应该可以对事情进行排序。

因此，在scroll事件中添加一些内容，以使scrollTop()的值偏移行和文本的位置。

scrollTop()：http://api.jquery.com/scrollTop/

scroll事件：http://api.jquery.com/scroll/

我最初的想法是通过将rows和text元素组合在一起以及假冒文本背后的行来避免JavaScript ...但鉴于您的具体情况我无法想出任何东西......

Answer 3

您应该将overflow:auto添加到row。这是一个证明它有效的jsfiddle：http://jsfiddle.net/BskaP/3/ 我举了一个额外的长行作为例子。

我不知道这是不是你想要的，但我认为是。