anonymousxxx anonymousxxx - 5 months ago 209
jQuery Question

JQuery mCustomScrollbar autoScrollOnFocus

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

Problem : When click on / focus on reCaptcha field scroll automatically to top of div.

See on Demo on Jsffidle, Code on Jsfiddle

note : if mscrollbar not working on jsfiddle, that is issue calling js and css from malihu site.

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


Using
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
}
});


It's working for all fields focus not auto scroll, how can i fix this issue without using
autoScrollOnFocus: false
?

Answer

Solved

I use jQuery focus() and mCustomScrollbar scrollTo

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

Code on Jsffidle

So, when focus (using click) recaptcha field auto scroll to self. But It's not work when I'm using tab key. I tried with alert

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

It's work when tab and click, I don't know jQuery focus() not working with scrollTo self

For the present :

I'm using scrollTo with target id's submit button.

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

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

Code on Jsffidle

Comments