hCaptcha在调用时滚动到顶部

Question

我在不可见模式下为我的网站添加了hCaptcha，当我的表单上的提交按钮被按下时，我调用了挑战

await captcha.execute({ async: true }).catch(() => { // ... }
submitForm();

然而，由于某些原因，这会导致页面滚动到顶部，然后显示hCaptcha挑战。

如何防止滚动?

示例:https://codepen.io/aisouard/pen/mdxKqZy

Answer 1

在Google端似乎有一个bug，但是他们很久以前就修复了。

可以将html中的height设置为auto:

html {
height: auto
}

如果您有height: 100%，则出现滚动问题。

Answer 2

这似乎是Firefox的一个问题。

请确保您没有启用平滑滚动行为。

html {
/* Make sure this line is disabled! */
/* scroll-behavior: smooth; */
}

创建一个变量，用于存储当前的Y轴滚动位置，也可以是一个类属性。

let currentScroll = 0;

在hCaptcha初始化时，将其指向一个回调，当挑战出现时将被触发。

function onCaptchaOpen() {
if (('netscape' in window) && / rv:/.test(navigator.userAgent)) {
window.scrollTo({ top: currentScroll });
}
}
let widgetId = window.hcaptcha.render('contact-captcha', {
sitekey: '10000000-ffff-ffff-ffff-000000000001',
size: 'invisible',
'open-callback': onCaptchaOpen,
});

然后找到提交按钮，并在触发验证码挑战之前存储当前滚动位置。

function validate(event) {
event.preventDefault();
currentScroll = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0);
window.hcaptcha
.execute(widgetId, { async: true })
.then(({ response }) => console.log(response));
}
const submitButton = $('#submit-button').get(0);
submitButton.onclick = validate;

修复codependency: https://codepen.io/aisouard/pen/NWYEbpp