页面滚动到绝对俯视儿童身高

Question

我已经创建了一个包含大量数据的div产品。和使用绝对位置和z-index：2的注册表单的div以及用于显示和隐藏该注册表单的按钮。当用户点击注册时，它的显示位于顶部。但是我想让我的页面滚动至注册表单的高度。但它滚动到全身，也显示最后的产品。我用我的代码示例创建了代码片段。这里我只想滚动pagetill黄色背景。我想使用纯CSS或几乎纯粹的Java脚本来做到这一点，并且不能使用J Query。

#signup 
 
{ 
 
position:absolute; 
 
top:0px; 
 
left:10%; 
 
z-index:2; 
 
background-color:#ffff00; 
 
width:80%; 
 
}

<div id="Product"> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    </div> 
 
<div id="signup"> 
 
    <h1>Login</h1> 
 
<input type="text"/><br><br> 
 
    <input type="text"/><br><br> 
 
    <input type="text"/><br><br> 
 
    <input type="text"/><br><br> 
 
    <input type="text"/><br><br> 
 
    <input type="text"/><br><br> 
 
    <input type="text"/><br><br> 
 
    <input type="text"/><br><br> 
 
</div>

Answer 1

给你：

#signup 
 
{ 
 
position:absolute; 
 
top:0px; 
 
left:10%; 
 
z-index:2; 
 
background-color:#ffff00; 
 
width:80%; 
 
    height: 300px; 
 
overflow: auto; 
 
} 
 

 
body{ 
 
    overflow: hidden; 
 
}

<div id="Product"> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    <h1>Something Goes Here</h1> 
 
    </div> 
 
<div id="signup"> 
 
    <h1>Login</h1> 
 
<input type="text"/><br><br> 
 
    <input type="text"/><br><br> 
 
    <input type="text"/><br><br> 
 
    <input type="text"/><br><br> 
 
    <input type="text"/><br><br> 
 
    <input type="text"/><br><br> 
 
    <input type="text"/><br><br> 
 
    <input type="text"/><br><br> 
 
</div>