bootstrapのmodalでscrollTop(0)が効かない時

概要

modalを2回ほど開くと前回のスクロール位置が記憶されてしまうので、モーダルを開いた際に毎回ページトップにスクロールしたかった。

やったこと

consoleで下記のようにしてEnterしたところきちんとスクロールされる。

$('#modal-id .modal-dialog').scrollTop(0);

jsファイルの中に入れておくとうまくスクロールしてくれなかった。

js中でconsole.logすると、modalを開いている最中はscrollTop()で出てくるスクロール位置が0を返しているみたいだった。
しかし、コンソール上でmodalが開いたあとにscrollTop()するとスクロール位置の数値が返ってくる。
どうやらmodalが開いたあとにスクロール位置が出ている状態でscrollTop(0)しないとスクロールされないようだ…。

modalが開ききったかチェックする方法がよくわからなかったので、setintervalでスクロール位置が取得できるまでチェックして遅延実行することにした。

//このへんにmodalを開く動作

//scrollTop()が0以上ならmodalが開いたとしてtopに移動させる
var modalScroll = setInterval(function() {
	var val = $('#modal-id .modal-dialog').scrollTop();
	if (val > 0) {
		clearInterval(modalScroll);
		$('#modal-id .modal-dialog').scrollTop(0);
	}
}, 0);

これで無事にトップへスクロールできた。

タイトルとURLをコピーしました