当使用 HTML5 验证的页面上存在表单字段时，我在 html 标记上设置
scroll-behaviour:smooth如果第一个错误字段位于视口之外，则在验证时，文档会向上滚动并聚焦在该字段上，但不会显示错误消息。
我已经设置了下面的基本代码。注意：使用 Codepen、JSFiddle 等不会出现此问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scroll Behaviour / Form validation Issue</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
scroll-behavior: smooth;
}
p {
margin-bottom: 1200px;
}
</style>
</head>
<body>
<h3>Scroll behavior / From validation issue</h3>
<form id="frm-enquiry" action="?">
<fieldset>
<label for="first-name">First name</label>
<input id="first-name" type="text" required />
<p>Scroll down to submit button and click. If scroll occurs then no error message is shown. <br/>(Note: shows if you hit enter on the field)</p>
<button type="submit">Submit</button>
</fieldset>
</form>
</body>
</html>
有人遇到过这种情况吗？
仅在
scroll-behavior: smoothbody<style>
body {
scroll-behavior: smooth;
}
p {
margin-bottom: 1200px;
}
</style>
我认为这是解决您问题的快速方法。
这是 Blink 渲染引擎（基于 Chrome 的浏览器、Edge 和 Opera 使用）中的一个错误。这是错误报告：
https://bugs.chromium.org/p/chromium/issues/detail?id=1245534
在 Safari 中似乎也有类似的行为，尽管我认为他们没有开放的错误跟踪系统。
在 Firefox 中，它似乎表现正确，但忽略了平滑滚动，只是跳转到页面上的正确位置。