Question

我的页面上有2个div修复位置，我想用浏览器滚动条滚动第二个div而不是div滚动，有谁知道怎么做？我希望它不会太混乱。

#firstDiv
{
  position:fixed;width:70%;height:20%;background-color:red;     
}
#secondDiv
{
  top:20%;position:fixed;width:70%;background-color:blue;overflow-y:scroll;bottom:0px
}

<html>
<head>
<title>somthing</title>
</head>
<body>
<div>
    <div id="firstDiv">
    </div>
    <div id="secondDiv">
        <pre>
		some Text some Text some Text some Text some Text
some Textsome Textsome Textsome Textsome Textsome Textsome 
some Textsome Textsome Textsome Textsome Textsome Textsome


	</pre>
    </div>
</div>
</body>
</html>

巴

Answer 1

fixed属性使得两个div都已经与用户一起向上和向下滚动。使用当前设置，您无法看到，因为页面上没有向上或向下滚动。

您可能想要做的只是制作第一个div fixed并将另一个留在static（标准值）。如果第二个div足够高，浏览器将添加一个滚动条，允许您在第一个div保持原位时向上/向下滚动第二个div。

看一下这个片段（请务必点击右上角的“整页”）：

body {
    margin:0;
}

#first {
    position:fixed;
    top:0;
    width:100%;
    height:100px;
    background-color:red;
}
#second {
    margin-top:100px;
    width:100%;
    height:1500px;
    background-color:blue;
}

<body>
    <div id="first">
        First div
    </div>

    <div id="second">
        Some text more text even more text.<br />
        A new line here. More text.<br />
        Text text text text text text.<br />
        Text text text text text text.<br />
        Text text text text text text.<br />
        Text text text text text text.<br />
        Text text text text text text.<br />
        Text text text text text text.<br />
        Et cetera.<br />
    </div>
</body>

使用浏览器滚动条

1 个答案: