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

解决了

我使用jQuery focus()和mCustomScrollbarscrollTo

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

Code on Jsffidle

因此,当焦点(使用点击)recaptcha字段自动滚动到自我.但是当我使用tab键时它不起作用.我试着提醒

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

选项卡和单击时它的工作, 我不知道jQuery focus()不能与scrollTo自己一起工作

目前:

我正在使用带有目标ID提交按钮的scrollTo.

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

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

Code on Jsffidle