JQuery mCustomScrollbar autoScrollOnFocus

时间:2013-06-30 16:23:18

标签: jquery scrollbar recaptcha mcustomscrollbar

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

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

请参阅Demo on JsffidleCode on 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的情况下解决此问题?

2 个答案:

答案 0 :(得分:5)

<强>解决

我使用jQuery focus()和mCustomScrollbar scrollTo

$("#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

答案 1 :(得分:-1)

mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);