使用固定标题时，必需的文本区域字段未正确滚动到。 CSS 属性滚动边距/填充不起作用

Question

我的网站上有一个固定标题和一个表单。有一些 input 字段和一些 textarea 字段是必需的。当提交表单而未填写这些字段时，我希望用户能够适当地滚动到未填写的最上面的必填字段。粘性导航栏使这变得棘手 - 我已经找到了 input 标签的解决方案 - 使用 CSS 属性 roll-margin-top ，其值等于导航栏的高度。不幸的是，这不适用于 textarea 标签。

header {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: yellow;
    top: 0;
}

input { /* WORKS */
  scroll-margin-top: 50px;
}

textarea { /* DOES NOT WORK */
  scroll-margin-top: 50px;
}

这里有一个显示问题的小提琴：https://jsfiddle.net/3t42yqgj/（确保使用 Chrome 或基于它的其他浏览器打开它）。

一种解决方案是设置 html 标签的 CSS 属性 roll-padding-top （注意使用 padding 而不是 margin），其值等于导航栏的高度。问题是它给我网站的其他部分带来了问题 - 我希望它仅应用于几个特定页面的表单。不幸的是，该属性不适用于任何其他标签（例如 form 或 div）。

html { /* WORKS */
  scroll-padding-top: 50px;
}

form { /* DOES NOT WORK */
  scroll-padding-top: 50px;
}

div { /* DOES NOT WORK */
  scroll-padding-top: 50px;
}

请帮助我！

Answer 1

尝试更改CSS中textarea的值。增加它，因为textarea字段的距离大于顶部。