0

iScroll4 スクローラーにフォームを埋め込みました。フォームは、wordpress Gravity フォーム プラグインによって生成された ajax フォームです。

フォームで送信を押すと、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 は、ラッパーとスクローラーの両方の正しいサイズを知る必要があります。それらは起動時に初めて計算されますが、コードが要素のサイズを変更する場合、DOM をいじっていることを iScroll に警告する必要があります。

これは、適切なタイミングでリフレッシュ関数を呼び出すことによって実現されます。これを理解することで、何時間もフラストレーションを感じてスクロールする必要がなくなります。

要素の高さ/幅を変更するか、何らかの方法で html 構造を変更するたびに (appendChild や innerHTML など)、ブラウザーのレンダラーがページを更新します。ブラウザーが変更を適用すると、JavaScript から新しい DOM (およびプロパティ) に再びアクセスできます。場合によっては、このプロセスがすぐに完了しないことがあります。

于 2012-09-09T10:31:24.577 に答える