html - 如何使用 css 创建一个仅识别当前最顶层容器滚动的滚动条?

标签 html css

我有两个容器。最底部的那个创建了一个滚动条,因为它的高度足够大到需要滚动条。当最顶部的容器在最底部的容器 id 上方可见时,滚动条适用于该容器。现在滚动会影响底部和顶部容器。你是怎么做到的?谢谢!

这是发生的事情的代码: 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>

最佳答案

您可能需要将 position: absolute 赋给您的 #inner div 以完成此操作。

关于html - 如何使用 css 创建一个仅识别当前最顶层容器滚动的滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14782915/

相关文章:

html - css改变内联子div的宽度

jquery - 如何将 div 的副本从当前位置动画化到右上角

html - 使子 flexbox 容器可滚动

javascript - 如何限制网站js文件的下载?

javascript - 单击按钮时,div 跳出位置

css - 通过通过 #show/n?format=css 而不是 #show/n.css 返回的 Controller 自定义 CSS

html - 用数字代替元素符号点的无序列表

JavaScript window.innerwidth 不能正常工作

html - 下拉菜单中的 z-index 和相对定位有问题吗?

javascript - 自动调整编辑区域内的图像大小