2

翻訳された垂直スクロール div のテキスト入力に問題があります。

Webkit ブラウザーで、次の単純化された例を表示します。

http://jsfiddle.net/ZbguJ/3/

div の一番下までスクロールし、テキスト ボックスをクリックして、キーボード ボタンを押します。div は上にスクロールして戻り、フォーカスされた入力は表示されません。予期される動作は、div がスクロールしないこと、およびユーザーが妨げられずにテキストを入力し続けることができることです。

ブラウザが、翻訳を考慮せずに div のスクロール先を決定しているようです。

可能な回避策はありますか？

実際のアプリケーションでは、問題の要素は translate を使用して画面上でアニメーション化します。'top' プロパティで変換を CSS アニメーションに置き換えると、アニメーションの滑らかさに深刻な影響がありますが、スクロールの問題は解決します。

4

2 に答える 2

0

簡単な答え：使用しないでくださいtranslate。代わりにmargin-topとを使用してください。margin-left変換を解除して追加することで、フィドルを機能させることができます

margin-top: -200px;
于 2012-10-03T01:57:10.203 に答える
0

今朝シャワーを浴びながら考えた結果、回避策が見つかりました。

スクロール コンテンツを親 div にラップし、親 div を通常どおりに翻訳し、スクロール div を親 div と同じ向きに反対に翻訳し、親の翻訳量に top または margin-top を設定して、内側の div を正しく配置します。このフィドルの更新された例を参照してください: http://jsfiddle.net/ZbguJ/5/

#Parent {
    -webkit-transform: translate(0, -200px); /* animated */
}
#Child { 
    -webkit-transform:  translate(0, 200px);
    top: -200px;
    position:relative;
}

ばかげていますが、それは仕事を成し遂げます。

于 2012-10-03T20:10:46.453 に答える