Высота iScroll4 неверна после отправки формы ajax. Высота - это оригинальная высота перед отправкой формы

Question

Я встроил форму в свой скроллер iScroll4. Форма представляет собой форму AJAX, созданную плагином Gravity для WordPress.

Когда я нажимаю кнопку Отправить в форме, высота iscroll (генерируемая при загрузке страницы) остается неизменной, а это означает, что если форма больше после нажатия кнопки отправки, вы не можете прокрутить весь путь вниз.

Смотрите мой код ниже...

var myScroll,
    myScrollSidebar;

function loaded() {
    myScroll            = new iScroll('wrapper');
    myScrollSidebar     = new iScroll('sidebar-wrapper');
}

var formInputs = [
  document.getElementById('gform_submit_button_1'),
  document.getElementById('input_1_1'),
  document.getElementById('input_1_2'),
  document.getElementById('input_1_3'),
  document.getElementById('input_1_4'),
  document.getElementById('input_input_1_5')
];

for(var i = 0; i < formInputs.length; i++) {
  formInputs[i].addEventListener('touchstart' /*'mousedown'*/, function(e) {
    e.stopPropagation();
  }, false);
}

jQuery(document).bind('gform_page_loaded', function(){

    var formInputs = [
      document.getElementById('gform_submit_button_1'),
      document.getElementById('input_1_1'),
      document.getElementById('input_1_2'),
      document.getElementById('input_1_3'),
      document.getElementById('input_1_4'),
      document.getElementById('input_input_1_5')
    ];

    for(var i = 0; i < formInputs.length; i++) {
      formInputs[i].addEventListener('touchstart' /*'mousedown'*/, function(e) {
        e.stopPropagation();
      }, false);
    }

});

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

Может кто-нибудь, пожалуйста, помогите мне исправить это так, когда форма отправляет, высота iScroll обновляется возможно?

Связанный jquery - это то, что входные данные формы работают после отправки формы. Это потому, что iscroll4 борется с элементами формы.

Заранее спасибо.

мистифицировать

Answer 1

Вам нужно заставить iScroll вычислять новую высоту с помощью myScroll.refresh() (ПОСЛЕ вашего AJAX).

Это со страницы разработчика ( http://cubiq.org/iscroll-4):

iScroll должен знать правильные размеры как оболочки, так и скроллера. Они вычисляются при первом запуске, но если ваш код меняет размер элементов, iScroll должен быть предупрежден о том, что вы работаете с DOM.

Это достигается путем вызова функции обновления с правильной синхронизацией. Пожалуйста, следуйте за мной внимательно, понимание этого избавит вас от многих часов разочарования.

Каждый раз, когда вы изменяете элементы высоту / ширину или изменяете html-структуру любым способом (например, appendChild или innerHTML), средство визуализации браузера обновляет страницу. После того, как браузер применил изменения, вы снова можете получить доступ к новому DOM (и свойствам) из javascript. Иногда этот процесс не мгновенный.