防止粘滞表单输入的位置更改

Question

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

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

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

https://jsfiddle.net/vy8h77xr/18/

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，因此您并不完全需要这种类型的位置。尝试tu只需使你的页脚像这样固定。

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

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

你可以找到更多关于这个位置在这里：

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