2013-06-30 61 views
7

Tôi có biểu mẫu liên hệ với reCaptcha và sử dụng plugin jQuery mCustomScrollbar.JQuery mCustomScrollbar autoScrollOnFocus

Sự cố: Khi tôi nhấp vào/tập trung vào trường reCaptcha, trang sẽ tự động cuộn lên đầu div.

Xem Demo on Jsffidle, Code on Jsfiddle

lưu ý: nếu mscrollbar không được làm việc trên jsfiddle, đó là vấn đề gọi js và css từ trang web malihu.

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

Sử dụng autoScrollOnFocus: false

tự động cuộn trên các yếu tố có trọng tâm (ví dụ thanh cuộn tự động cuộn để tạo textfields khi phím TAB được nhấn), giá trị: true, false.

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

Đó là làm việc cho tất cả các lĩnh vực tập trung không tự động cuộn, làm thế nào tôi có thể khắc phục vấn đề này mà không sử dụng autoScrollOnFocus: false?

Trả lời

5

Giải Quyết

tôi sử dụng jQuery focus() và mCustomScrollbar scrollTo

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

Code on Jsffidle

Vì vậy, khi tập trung (sử dụng nhấp chuột) lĩnh vực reCAPTCHA tự động cuộn để tự. Nhưng nó không hoạt động khi tôi đang sử dụng phím tab. Tôi đã thử với cảnh báo

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

Đó là việc khi tab và click, Tôi không biết jQuery focus() không làm việc với scrollTo tự

Đối với hiện tại:

Tôi đang sử dụng scrollTo với nút gửi của id mục tiêu.

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

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

Code on Jsffidle

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

Vì đây là một câu hỏi thực sự cũ và một câu trả lời đã được chấp nhận năm trước với bối cảnh cách hơn, tôi khuyên bạn nên xóa câu trả lời này. –