0

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

提前致谢。

乔什

4

1 回答 1

1

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

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

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

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

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

于 2012-09-09T10:31:24.577 回答