如何创建一个滚动条来识别只使用css的当前最顶层容器的滚动？

我有两个容器。最底层的创建一个滚动条，因为它的高度足够大以至于需要它。当最上面的容器在最上面的容器标识上方可见时，就像滚动条一样工作仅限于那个容器。现在滚动会影响底部和顶部的容器。你如何去做这件事？谢谢！如何创建一个滚动条来识别只使用css的当前最顶层容器的滚动？

这里是正在发生的事情代码： http://jsfiddle.net/5wNDX/68/

CSS：

#outer { 
background-color: rgba(255, 255, 255, 0); 
bottom: 0px; 
color: rgb(51, 51, 51); 
display: block; 
font-size: 14px; 
height: 563px; 
left: 0px; 
overflow-x: auto; 
overflow-y: scroll; 
position: fixed; 
right: 0px; 
top: 0px; 
width: 1479px; 
z-index: 9999; 
} 

#inner { 
background-color: rgb(255, 255, 255); 
border:4px solid #000; 
color: rgb(51, 51, 51); 
display: block; 
font-size: 14px; 
height: 900px; 
margin:0 auto; 
overflow-x: hidden; 
overflow-y: hidden; 
position: static; 
width: 750px; 
z-index: auto; 
}

HTML：

<body> 
    <div>Large block of text</div> 
    <div id='outer'> 
     <div id='inner'> 
     test 
     </div> 
    </div> 
    </body>

来源

2013-02-08 perseverance

如果您希望'＃inner'元素在滚动时不移动，则必须将其设置为'position：fixed'并将其定位为'left/right'和/或'top/bottom'。 – Ragnarokkr 2013-02-08 23:24:43

您可能需要给position: absolute你#inner div来实现这一目标。

来源

2013-02-08 23:18:54 zakangelle

如何创建一个滚动条来识别只使用css的当前最顶层容器的滚动？

回答

相关问题