.show（）はスクロール可能なDIVをFirefoxの先頭にジャンプさせます

Question

私はスクロール可能なdivの行（および隠れた行）を持っています。行の1つをクリックすると、次の非表示の兄弟が表示されます。

Firefoxでは、行をクリックすると、スクロール可能なdivが最初にジャンプします。下にスクロールして行をクリックすると、スクロールバーはその位置にとどまります。

IEとChromeはスクロールバーをリセットしないため、非常に不快です。

http://jsfiddle.net/xyan/TH4X3/

HTML：

HTMLは、スクロールバーを持っているために十分な情報を持っていることの目的のために長いです。その長さのために、私はここにそれを掲示しません。

Javascriptを： "同様の質問" リンクの

var trackingresults = { 
    pos: [], 
    container: {}, 
    data: {} 
} 
trackingresults.container = $('#test-tracking'); 
trackingresults.container.delegate('tr:not(.history)', 'click', function() { 
    if ($(this).next('tr').is(':visible')) { 
     $(this).find('td.details').removeClass('collapse').addClass('expand'); 
     $(this).removeClass('current'); 
     $(this).next('tr').hide(); 
    } else { 
     $(this).find('td.details').removeClass('expand').addClass('collapse'); 
     $(this).addClass('current'); 
     $(this).next('tr').show(); 
    } 
    return false; 
}); 
trackingresults.container.delegate('tr:not(.history)', 'hover', function() { 
    if ($(this).find('td.details').hasClass('hover')) { 
     $(this).find('td').removeClass('hover'); 
    } else { 
     $(this).find('td').addClass('hover'); 
    } 
    return false; 
}); 

一つはthis problemを示唆しました。これは類似しているようですが、この質問を保証するのに十分かもしれません。

ジャンプを防ぐためにできることはありますか？

Answer 1

私は少し問題が去っていきましたあなたのコードをリファクタリング：http://jsfiddle.net/TH4X3/6/

をあなただけ:hoverを経由して、CSSでそれを行う、.hover()ハンドラまたは.hoverクラスは必要ありません。このセレクタを置き換えます。これで#test-shipments td.hover：

#test-shipments tr.current, #test-shipments tr:hover td { 
    background-color: #B1C3C4; 
} 

をあなたは.collapsedクラスは必要ありません - 単にデフォルトことを確認し、デフォルトを上書き.expandedてみましょう。

次の行を明示的に表示して非表示にするのではなく、以前の兄弟の.expandedクラスに基づいてcssを使用してください。

var trackingresults = { 
    pos: [], 
    container: {}, 
    data: {} 
} 
trackingresults.container = $('#test-tracking'); 
trackingresults.container.delegate('tr:not(.history)', 'click', function() { 
    $(this).toggleClass("expand"); 
}); 

そして副作用として、あなたのFirefoxのスクロール問題が消える：あなたはこのためにあなたJavaScriptを減らすことができます*ちょうどそれらのCSSの微調整で

#test-shipments tr.expand + tr.history { 
    display: table-row; 
} 

：+ - 隣接兄弟セレクタを使用！

* ^{プラスIE7ハックのカップル、これとの助けに感謝をthe jsFiddle}