Question

我有一个简单的网页，其中包含标题，动态内容和粘性页脚。在页脚中，我有一个包含文本输入和提交按钮的表单。

在内容超出页面可视区域的情况下，粘性表单的行为与预期一致（它在可见区域的底部可见）。

我注意到当我将文本更改输入到表单的文本字段时，动态内容将自动滚动到底部。我已经实现了一个hack来将内容滚动回原来的位置，但我想知道是否有办法禁用滚动行为开始... ...

HTML：

<div class="list" id="list">
  <ul>
    <li>content</li>
    <!-- add more content to fill beyond the page -->
  </ul>
</div>
<div class="footer">
  <form id="form">
    <input type="text" id="text"/>
    <input type="submit" value="Submit" id="submit" />
  </form>
</div>

的CSS：

.footer {
  position: sticky;
  bottom: 0;
}

JS：

var text = document.getElementById("text");
text.addEventListener("keydown", (e) => {
    var y = window.scrollY;
    setTimeout(() => window.scrollTo(0, y), 0);
})

Answer 1

您使用的是粘性页脚，但底部为0px，因此您并不需要这种位置。尝试简单地让你的页脚像这样固定。

.footer {
   position: fixed;
   bottom: 0;
}

https://jsfiddle.net/Andrej_v/vy8h77xr/20/

您可以在此处找到有关此职位的更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/position

防止粘性表格输入的位置变化

1 个答案: