hCaptcha 在调用时滚动到顶部答案

【问题标题】：hCaptcha scrolls to top on invokationhCaptcha 在调用时滚动到顶部
【发布时间】：2022-08-16 15:11:32
【问题描述】：

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

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

但是，由于某种原因，这会导致页面滚动到顶部，然后向我显示 hCaptcha 挑战。

如何防止这种滚动发生？

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

请包括您的 HTML 和 CSS，因为那里可能存在问题。
@pygeek 当然，我们开始了，按钮在底部，根本没有使用 CSS：codepen.io/aisouard/pen/mdxKqZy
这个 codepen 似乎可以按照您想要的方式工作。我滚动到底部，单击提交，然后出现 hCaptcha（文本不会滚动到顶部）。
有趣：我已经用 Chrome、Edge 和 Firefox 测试了你的 codepen，问题只出现在 Firefox 上！
@johey，感谢您指出这一点。事实上，我没有安装 Chrome 来检查它是否是另一个 Firefox 问题。意识到这一点后，这是一种解脱，稍后会找到解决方案并将其发布在这里！

标签： javascript html frontend hcaptcha

【解决方案1】：

Google 端有seemed to be a bug，但他们很久以前就修复了。

解决方法可能是将height 中的html 设置为auto：

html {
    height: auto
}

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

【讨论】：

你好马丁，谢谢你的回答！这个 CSS 已经在我这边应用了，但请注意问题是关于 hCaptcha 的，可以在 hcaptcha.com 上找到，而不是 Google 的 reCaptcha。

【解决方案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;

固定密码笔：https://codepen.io/aisouard/pen/NWYEbpp

【讨论】：