2

それは別の話ですが、チャットボックス内のテキストエリアにフォーカスしようとすると、望ましくないスクロールが発生します。この基本的な構造を持っているので、部分的に表示されているウィンドウ (ユーザーの名前がその領域に表示されます) をクリックすると、ウィンドウが完全に表示されます。

<div class="container"></div>
<div class="content">
    <div class="block"><textarea></textarea></div>
    <div class="block"><textarea></textarea></div>
</div>

コンテナは他のすべてのコンテンツ自体であり、コンテンツ div はチャット ウィンドウ コンテナであり、ブロックはチャット ウィンドウであるとしましょう。

このjsfiddle http://jsfiddle.net/Mhrvf/1/でそれを見ることができます

テキストエリアにフォーカスを合わせていない場合は問題ありませんが、フォーカスすると、ブラウザはテキストエリアを表示するためにすべてのコンテンツをスクロールしようとします。その後、チャット ウィンドウを表示するたびに、本文のコンテンツがウィンドウ下部とテキストエリア。

ここで問題を確認できますhttp://jsfiddle.net/Cc25T/
「会話」を開くたびにスクロールバーを見てください

アニメーションが終了し、テキストエリアがまだ表示されるように、フォーカスを十分に遅らせることにハックしました。このように: http://jsfiddle.net/Cc25T/3/

しかし...もっと良い方法はありますか？個人的に私はタイムアウトに頼るのが好きではないので、どんな提案も歓迎します:)
jQuery animate を使用できることは知っていますが、それはコールバックですが、コストが高く、より良いアニメーションがサポートする方法があるため、使用しないことを好みます。 CSS トランジションの使用 (IE がサポートしていないことは知っていますが、気にしません)

4

2 に答える 2

1

@Moazzam Khan から提供された詳細のおかげで、イベントを処理することができました。ただ、ブラウザーが transitionend 単純なイベントを処理すると bind イベントが 2 回発生する可能性があるため、1 つを使用しました。それに加えて、ブロックに show クラスがあるかどうかを検証する必要がありました。そうしないと、常にフォーカスされ、同じ結果が得られます。 

$('.block').click(function () {
    $(this).one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
    function () {
        if ($(this).hasClass('show')) $(this).children('textarea').focus();
    });
    $(this).toggleClass('show');
});

ここでわかるように、それはかなりうまくいきました: http://jsfiddle.net/Mhrvf/3/

于 2013-07-30T21:15:36.560 に答える
1

トランジションの場合、次を使用して、jQuery を介してトランジションの終了を検出できます。

$('.block').click(function () {
   $(this).bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
       $(this).children('textarea').focus();
  });
    $(this).toggleClass('show');
});

jsfiddle - http://jsfiddle.net/Cc25T/4/

于 2013-07-30T20:56:01.100 に答える