overflow 子内容滑动,body也跟着滑动如何解决?

代码如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .fixed{
        position: fixed;
        height: 300px;
        width: 300px;
        background-color: red;
        overflow-y: scroll;
        top: 0px;
    }
    .inner_content {
        height: 3000px;
    }
    .container {
        height: 5000px;
    }
    </style>
</head>
<body>
    <div class="container"></div>
    <div class="fixed">
        <div class="inner_content"></div>
    </div>
</body>
</html>

如何能做到,红色容器内容滑动的时候body容器不滑动,不是很明白

阅读 8k
3 个回答

Body容器不滑动是什么意思?
网页最右边的滚动条不动吗?

.container {
    height: 5000px;
}

你的container高度设置这么高肯定会滚动的。觉得你的布局有点问题
不想滚动的,body需要

body{
    overflow:hidden;
}
新手上路,请多包涵

这几天在做项目的时候遇到和楼主一样的问题,就是希望body不动,子页面滑动,这时候我的解决方案是:
body用overflow控制其不滑动(不知道你想要的是左右还是上下不滑动),子内容定位方式position:fixed;改成position:absolute;这是就可以内容滑动了。(这个bug困扰我两天)。:-)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题