問題へのリンク:
jQueryダイアログ内でメソッドを使用し.scrollTop()てもうまくいきません。HTMLマークアップは次のとおりです。
<div id="toogleMAmaximized" style="background:#000000">
<div id="missionsMinimized" style="display:none;margin-top:10px;margin-bottom: 10px;cursor:pointer"><img src="images/missionsMinimized.png" alt="missions"/></div>
<div id="achivmentsMinimized" style="display:none;margin-top:5px;cursor:pointer"> <img src="images/achivmentsMinimized.png" /></div>
<div id="missions" class="unselected MAmaximized"></div>
<div id="achivments" class="unselected MAmaximized"></div>
<div id="dataMA" style="position:absolute;top:10px;right:10px;display:none;width:850px;height:500px;background-image: url('images/background-home.png') ; overflow-y:scroll"></div>
</div>
JavaScript 関数を使用してdataMAdiv を設定します。
function populateMissionsData(){
$('#missions').empty();
$('#dataMA').append('<h1 style="color:white">Current Missions:</h1>');
for (var $key in missionData['current']){
$('#dataMA').append(missionData['current'][$key]);
}
$('#dataMA').append('<h1 style="color:white">Not started missions:</h1>');
for (var $key in missionData['other']){
$('#dataMA').append(missionData['other'][$key]);
}
$('#dataMA').append('<h1 style="color:white">Ccompleted Missions:</h1>');
for (var $key in missionData['completed']){
$('#dataMA').append(missionData['completed'][$key]);
}
}
これは、問題なく dataMA が読み込まれるため、うまく機能します。これで、プラグインを使用する dataMA 内の div のコンテンツを展開するボタンができlivequeryました。スクロールの問題は次のとおりです。
$(".plus").livequery('click',(function(){
key = $(this).attr('key').toString();
$('#data'+ key).slideToggle('fast');
//this is the problem, it does not scroll the dialog.
$('#dataMA').scrollTop($('#data'+ key).offset().top);
//Update - this does not work either
$('#dataMA').scrollTop($('#dataMA')[0].scrollHeight);
//Update 100 - This is not working either
$('#dataMA').scrollTop($('#data'+ key).offset().top - $('#dataMA').offset().top + $('#dataMA').scrollTop());
$(this).toggleClass('less')
if($(this).hasClass('less')){
$(this).attr('src','images/less.png');
}else{
$(this).attr('src','images/plus.png');
}
}));
プラスボタンをトリガーしてもスクロールしませんが、プラスボタンをもう一度クリックすると、下にスクロールして上にスクロールしたように機能します。
dataMAでセレクターを変更しましtoogleMAmaximizedた。スクロールしましたが、期待どおりではありませんでした (その中のコンテンツを上に移動しました)。
更新 1
興味がある場合は、私の環境:
jQueryv1.7.1
jQuery UI1.8.16
liveQuery1.1.1
更新 2jQuery環境を(1.7.2) およびjQuery UI(1.8.21)
の最新バージョンに更新しましたが、同じ問題が引き続き発生します。
Update 3
OK、fiddle問題を確認するためのファイルを入手しました。私の小さな画面では正しく表示できません。皆さんが改善してくれることを願っています。まず、右の画像をクリックしてから、最初の四角をクリックします。スクロールの問題を確認するには、タイトルのロードされていないアイコンのいずれかをクリックします (plusクラスがあります)。dataMA 変数は、データベースへのクエリを置き換えるもので、そこに入力した文字列を結果として返します。リクエストを使用して追加されたタグを使用するlivequeryと、多くの問題が発生したため、使用します。.on().post()
Update 4 解像度が 1300x768 よりも高い人は、jsfiddle ファイルを正しく取得できるかどうか教えてもらえますか? この問題を解決できませんでした。
更新 5
いくつかの要素をスクロールできますが、要素が含まれているdivの外側にある場合はスクロールされませんが、上記のようにボタンをもう一度押すと上にスクロールしようとします。
アップデート 6
理解を深めるためにjsfiddleを更新しました。手順は同じです。画像をクリックします->ダイアログがポップアップします->ミッションをクリックします->最後のミッション(厚い壁)までスクロールします->不足している画像をクリックして右（なぜ代替コンテンツが表示されないのかわかりません）それを行うと、非表示のコンテンツが表示され、もう一度クリックすると非表示になります。ただし、自動スクロールは行われません。