css 层滚动问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 层滚动问题相关的知识，希望对你有一定的参考价值。
有两个层：
#right
position:absolute;
width:600px;
height:100%;
overflow:auto;
overflow-x:hidden;
左边层 <div id='left'> 左边菜单 <div>
右边层 <div id="right"><div> 内容 </div><div>
右边层的内容很多，超出屏幕。所以显示滚动条。
请问如何用浏览器的滚动条滚动层的内容，并且去掉层的滚动条。
不过可以绕个弯来实现这个效果。
先确定一下你要的效果（以免回答的牛头不对马嘴）：
左边的导航始终固定不动，在左上角，右边的内容虽浏览器的滚动条拖动自动向下滚动以可以查看所有内容。
（如果确定的话，就可以接着往下看，不对的话，你就再补充下哈）
大致实现代码如下：
<html>
<head>
<style type="text/css">
div#left
float:left;
position:absolute;
top:expression(document.body.scrollTop+this.offsetHeight);
//关键是这两句！！！使左边的导航层始终相对浏览器左上角某个位置固定。
left:5px;
width:25%;
border:solid 2px red;
div#right
float:right;
width:70%;
border:solid 2px red;
height:1000px;//这里测试滚动使用。
</style>
</head>
<body>
<div id="left">相对于浏览器（而非网页文档）左上角绝对定位。</div>
<div id="right">主内容</div>
</body>
</html>
OK~~，你可以直接复制粘贴测试了，看一下效果对不对（去掉注释哈） 参考技术B 想了一下，这样也许可以：
#left
position:fixed;
width:230px;
height:400px;
min-height:400px;
#right
position:absolute;
width:600px;
height:1600px;(测试用）
这样左边的层不动，而其不会抖动。右边的层可以下拉。
附：fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。 fixed位置以浏览器的视窗为参照。本回答被提问者采纳 参考技术C 不行，层是不会跟这浏览器的滚动条进行内容滚动的。
一般做法是隐藏浏览器的滚动条，然后让right层的滚动条变成类似浏览器滚动条的效果，
你把你要实现的效果说出来，看看有没有更合理的解决方法！ 参考技术D DIV+CSS还得配合javascript，
说实话，不如用<frame>来得快。
以上是关于css 层滚动问题的主要内容，如果未能解决你的问题，请参考以下文章