ajax 表单提交后 iScroll 4 高度错误。高度是表单提交前的原始高度答案

【问题标题】：iScroll4 height is wrong after ajax form submission. Height is orginal height before form submitajax 表单提交后 iScroll 4 高度错误。高度是表单提交前的原始高度
【发布时间】：2012-02-08 23:42:28
【问题描述】：

我在 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 难以处理表单元素。

提前致谢。

乔什

【问题讨论】：

你有没有试过在提交后重新计算表单的高度然后调用refresh方法？

标签： javascript ajax iscroll4

【解决方案1】：

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

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

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

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

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

【讨论】：