ajax表单提交后iScroll4高度错误.高度是表单提交前的原始高度

Question

我在iScroll4滚动条中嵌入了一个表单。该表单是一个ajax表单，由wordpress Gravity表单插件生成。

当我在表单上点击提交时，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难以处理表单元素。

提前谢谢。

Josh

Answer 1

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

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

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

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

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