Jquery 如何阻止浏览器跳转到聚焦区域？

我在一个容器中有一个表单，上面有overflow:hidden，我正在更改它的类名，其中每个类都使用focus（）显示适当的聚焦字段

因此jQuery只应用类名。除webkit外，不涉及其他动画

问题在于，在动画出现之前，表单会在容器内移动以显示隐藏字段。“检查器”中没有任何值发生更改：顶部、顶部边距和顶部填充保持不变

我尝试了

preventDefaults（）在聚焦字段上，没有成功

这里有一把提琴来说明这件事


更新：
我想说明的是，当“tab”到下一个字段时，它确实会到那里，但是css动画发生在它的顶部，表单要么不跳动画，要么只是随着已经发生的滚动/显示而动画，因此预期的字段会在容器外结束

单击图例标记选项卡可以按预期工作。我将尝试阻止按键下事件的默认设置，而不是焦点事件，我会让您不断更新。
根据本文，这似乎是一个相当复杂的问题：

我通过手动管理输入的tabindex属性来管理类似的问题。这会删除不需要的伪滚动，但也会删除在视口外对输入进行制表的功能。如果您愿意接受这一点，那么您可以轻松地向单击处理程序添加一些代码，以添加或删除选项卡索引：

$(inputEl).attr('tabindex', -1);  // removes tabbing
$(inputEl).attr('tabindex', 1);   // restores tabbing

从视口外的输入中删除选项卡索引，并将其还原为可见输入。
它似乎完全按照我的Chrome浏览器中的预期工作？如何在JSFIDLE中重现该问题？我也没有看到Chrome有什么问题。在Firefox中，布局不太正确。动画在IE中根本不起作用。似乎在Firefox中也起作用。我可能没有说得很清楚，当你用TAB键聚焦一个字段时，问题就发生了。单击“图例标记”选项卡时，其工作正常。问题是，当用键盘聚焦时，无法控制的表单滚动会显示一个字段（到目前为止，我不知道其他方法）。当关注开发人员工具时，它不会失败。它可能是触发它的关键，所以焦点是结果，而不是原因。完美！很明显，我正在为表单单击创建事件，所以我不介意删除选项卡。实际上，我通过阻止默认设置来修复它，但这是最接近我的问题的答案，并且保留默认设置不变：）