Dar*_*eer 18 html css forms validation smooth-scrolling
scroll-behaviour:smooth当使用 HTML5 验证的页面上存在表单字段时，我在 html 标记上设置属性时遇到冲突。使用 Chrome 时您可能会看到此问题（在 Firefox/Safari 中正常）
如果第一个错误字段位于视口之外，则在验证时，文档会向上滚动并聚焦在该字段上，但不会显示错误消息。
我已经设置了下面的基本代码。注意：使用 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>
以前有人遇到过这种情况吗？
小智 1
scroll-behavior: smooth仅在标签中使用时不会发生错误body：
<style>
body {
scroll-behavior: smooth;
}
p {
margin-bottom: 1200px;
}
</style>
我认为这是解决您问题的快速方法。