JQuery mCustomScrollbar autoScrollOnFocus

Question

我有带有 reCaptcha 的联系表单并使用 jQuery mCustomScrollbar 插件。

问题:当我单击/聚焦 reCaptcha 字段时，页面自动滚动到 div 顶部。

参见Demo on Jsffidle , Code on Jsfiddle

注意:如果 mscrollbar 无法在 jsfiddle 上运行，那就是从 malihu 站点调用 js 和 css 的问题。

$(".scroller-back").mCustomScrollbar({
   advanced:{
     updateOnContentResize: true
   }           
});

使用autoScrollOnFocus: false

Auto-scrolling on elements that have focus (e.g. scrollbar automatically scrolls-to form textfields when the TAB key is pressed), values: true, false.

$(".scroller-back").mCustomScrollbar({
   advanced:{
     autoScrollOnFocus: false,
     updateOnContentResize: true
   }           
});

它适用于所有字段焦点而不是自动滚动，如何在不使用 autoScrollOnFocus: false 的情况下解决此问题？

Answer 1

已解决

我正在使用 focus() 函数和 mCustomScrollbar 函数 scrollTo

$("#recaptcha_response_field").focus(function() {
  $(".scroller-back").mCustomScrollbar("scrollTo",this);
});

Code on Jsffidle

当光标聚焦在验证码文本字段上时，滚动将滚动到包含验证码文本字段的行(滚动到自身)。但是当我们使用tab键时就不起作用了。我尝试过使用警报

$('#recaptcha_response_field').focus(function() {
  alert('Handler for .focus() called.');
});

已更新

我正在使用带有目标 id 提交按钮的scrollTo。

var a=Recaptcha.$("recaptcha_response_field");

$(a).focus(function() {
  $(".scroller-back").mCustomScrollbar("scrollTo","#submit_button");
});

Code on Jsffidle