1

phonegapアプリケーションでiScroll.jsを使用しています。テキスト領域にメッセージを入力すると、Webkitでテキストが自動的に一番下までスクロールしません。スクロールを無効にする-webkit-transformと、div自動スクロールが機能します。

テキスト領域を設定しようとしまし-webkit-transform: none !importantたが、結果が得られませんでした。

誰か考えがありますか？

4

1 に答える 1

0

これはWebkitのバグです。-webkit-transform回避策として、 textareaにフォーカスがある間は、iScroll要素の子からスタイルをオフにしscrollTop、スクロールされたコンテンツのジャンプを回避するためにすぐに値を設定できます。そして、ぼかしで元のスタイルを返します。これを処理するための基本的なコードは次のようになります。

// find iScroll block and its child
var scrollBlock = document.getElementById('wrapper');
var iscrollBox = scrollBlock.children[0];
var lastOffset = 0;

// remove translate styles on focus
var focusHandler = function() {
    var styleAttr = getComputedStyle(iscrollBox)['-webkit-transform'];
    var scrolledOffset = new WebKitCSSMatrix(styleAttr).f;

    iscrollBox.style.webkitTransform = '';
    scrollBlock.scrollTop = -scrolledOffset;
    lastOffset = scrolledOffset;
};
var blurHandler = function() {
    scrollBlock.scrollTop = 0;
    iscrollBox.style.webkitTransform = 'translate(0px, '+lastOffset+'px)';
};

// attach focus/blur handlers
var textareas = scrollBlock.querySelectorAll('textarea');
for(var i = 0, l = textareas.length; i < l; i++) {
    textareas[i].onfocus = focusHandler;
    textareas[i].onblur = blurHandler;
}

このようなJavaScriptの修正が気に入​​らない場合はwebkit-overflow-scrolling: touch、iScrollの代わりにCSS3プロパティを使用することを検討してください。また、いくつかの落とし穴がありますが、textareaではそのような問題はありません。

于 2012-11-16T15:48:20.677 に答える