ajax表单提交后iScroll4高度错误。高度为表单提交前的原始高度

Question

我已将一个表单嵌入到我的 iScroll4 滚动条中。该表单是一个ajax表单，由wordpress Gravity forms插件生成。

当我在表单上点击“提交”时，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

您需要使用 myScroll.refresh() 让 iScroll 计算新的高度（在 AJAX 之后）。

这是来自开发者页面 (http://cubiq.org/iscroll-4)：

iScroll 需要知道包装器和滚动条的正确尺寸。它们是在启动时第一次计算的，但如果您的代码更改了元素大小，则需要警告 iScroll 您正在弄乱 DOM。

这是通过在正确的时机调用刷新函数来实现的。请密切关注我，理解这一点将为您节省数小时的滚动挫败感。

每次更改元素高度/宽度或以任何方式修改 html 结构（例如：appendChild 或innerHTML）时，浏览器渲染器都会更新页面。一旦浏览器应用了更改，您就可以再次从 JavaScript 访问新的 DOM（和属性）。有时这个过程不是即时的。