JQuery mCustomScrollbar autoScrollOnFocus

Question

I have a contact form with reCaptcha and using jQuery mCustomScrollbar.

Problem: When I click / focus on the reCaptcha field, the page automatically scrolls at the top of the div.

See Jsffidle Demo, Jsfiddle Code

note: if mscrollbar does not work on jsfiddle, this is a problem with calling js and css from malihu site.

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

Using autoScrollOnFocus: false

Automatically scrolling elements with focus (for example, the scroll bar automatically scrolls to form text fields when you press the TAB key), values: true, false.

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

It works for all fields, and not for automatic scrolling, how can I fix this problem without using autoScrollOnFocus: false ?

Answer 1

solvable

I am using jQuery focus() and mCustomScrollbar scrollTo

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

Jsffidle Code

Thus, when the focus (with a click), the recaptcha field automatically scrolls to itself. But this does not work when I use the tab key. I tried with a warning

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

It works when tab and click, I do not know how jQuery focus() does not work with scrollTo self

Currently:

I am using scrollTo with the send button of the target id.

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

Jsffidle Code

Answer 2

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