页面滚动到绝对顶视图子高度答案

【问题标题】：page scroll to absolute top view child height页面滚动到绝对顶视图子高度
【发布时间】：2017-05-24 14:29:06
【问题描述】：

我创建了一个包含大量数据的 div 产品。和一个带有使用绝对位置和 z-index:2 的注册表单的 div 以及一个用于显示和隐藏该注册表单的按钮。当用户点击注册时，它会显示在顶部。但我希望我的页面滚动到注册表单的高度。但它的滚动直到整个身体，即也显示最后的产品。我用我的代码示例创建了 sn-p。在这里，我只想滚动 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>

【问题讨论】：

不确定我是否正确理解了这个问题，但如果我这样做了，我认为仅使用 CSS 是不可能的 - 您可以使用主题标签来获取页面中的锚点，否则您可能需要对纯 js 使用 jquery 或实验性 scrollIntoView 函数

标签： javascript html css

【解决方案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>

【讨论】：

点击注册按钮后它工作正常。但如果我关闭它，身体也会停止滚动并且无法在手机上运行
你能给我你的 JSfiddle 文件或其他东西来检查那个错误
尝试调整这个高度。如果内容的高度高于它的 div，则滚动可见
我告诉过你“一旦我点击注册按钮。但如果我关闭它，body 也会停止滚动”为此我必须在 body overflow hidden 和 scroll 之间切换