jquery - JQuery mCustomScrollbar autoScrollOnFocus

Question

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

问题：当我点击/关注 reCaptcha 字段时，页面会自动滚动到 div 的顶部。

请参阅Jsffidle 上的演示，Jsfiddle上的代码

注意：如果 mscrollbar 不能在 jsfiddle 上工作，那就是从 malihu 站点调用 js 和 css 的问题。

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

使用autoScrollOnFocus: false

在具有焦点的元素上自动滚动（例如，当按下 TAB 键时，滚动条会自动滚动以形成文本字段），值：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

当光标聚焦于 recaptcha 文本字段时，滚动将滚动到带有 recaptcha 文本字段的行（滚动到 self）。但是当我们使用 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

Answer 2

$(".scroller-back").mCustomScrollbar("scrollTo", $("#yourdiv"));