JQuery mCustomScrollbar autoScrollOnFocus

2018-06-25 21:40:20

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

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

See Demo on Jsffidle, Code on Jsfiddle

note : if mscrollbar isn't 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 (eg 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 ?

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

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

链接地址: http://www.djcxy.com/p/72472.html