JQuery mCustomScrollbar autoScrollOnFocus

Question

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 (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?

Colincolinson

Answer 1

Solved

I'm using focus() function and mCustomScrollbar function scrollTo

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

Code on Jsffidle

When the cursor has focus on recaptcha text field, the scroll will scrolling to on a line with recaptcha text field (scroll to self). But it's doesn't work when we use the tab key. I have tried with alert

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

Updated

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

Colincolinson

Answer 2

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

Friedrick

Since this is a really old question and an answer was accepted years ago with way more context, I suggest you delete this answer. – Chuipek