防止在粘性表单输入上更改位置答案

【问题标题】：Prevent Position Change on Sticky Form Input防止在粘性表单输入上更改位置
【发布时间】：2018-02-18 14:17:14
【问题描述】：

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

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

我注意到当我在表单的文本字段中输入文本变化时，动态内容会自动滚动到底部。我已经实现了将内容滚动回其原始位置的技巧，但我想知道是否有一种方法可以禁用滚动行为以开始...

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);
})

【问题讨论】：

标签： javascript css scroll sticky sticky-footer

【解决方案1】：

您使用的是粘性页脚，但底部距离为 0px，因此您并不完全需要这种位置。试着把你的页脚固定成这样。

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

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

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

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

【讨论】：

这将解决自动滚动问题，但您不会获得实际的粘性行为（当内容未填满整个屏幕时，页脚未固定到底部）。