androidでのjqueryとoverflow:scrollのバグ?

lightbox風にボタンクリックでのポップアップ広告を実装しようとしたのですが、

広告内のコンテンツが長かったので、スクロールが必要でした。

 

なので、jqueryでフェードインをして、

#overlay(薄い黒) > #popbox

のような構成にして、

#overlay position:fixed;

#popboxもfixedにして、overflow:scrollとしていたんですね。

で、#overlayをdisplay:noneとして、

  $(“#overlay”).fadeIn();

したのですが、

 

PCでは問題なく動いてたものの、

androidではどうにも挙動がおかしい。

 

なんとpopupした部分のリンクがクリックできないと言う不思議な事態に。

しかもそれをfacebook広告に出していたりしたので、しばらく無駄にお金を使っていたことに…。

 

 

さて、色々と見ていくうちに、overflow:scroll;だとなぜか要素をクリックできなかったり、

下の要素が干渉してしまったり、

z-indexがどうも下の物を上に持ってきているようであったり、

どうしたものかと思っていました。

仕方が無く、overflow:scrollを消して、position:fixedをabsolute;に変更。

scroll位置を覚えてpropでscrollTop:0へ、と言う方向に持っていって解決しました。

 

css

#overlay{

position:fixed;

top:0;

left:0;

right:0;

bottom:0;

overflow:hidden;

background:rgba(0,0,0,.8);

}

#popbox{

position:fixed;

top:5%;

left:5%;

right:5%;

bottom:5%;

overflow:scroll;

background:rgba(255,255,255,.8);

}

 

 

jquery

$(function() {
var current_scrollY;

$(“button”).click(function() {
current_scrollY = $( window ).scrollTop();
$(“#overlay”).fadeIn();
$(“#popbox”).scrollTop(0);

$(‘#wrap’).css({
position:’fixed’,
width:’100%’,
top:-1 * current_scrollY
});
$(“#popback”).fadeIn();
$(“#popbox”).focus();
});
$(“#close”).click(function() {
$(“#overlay”).fadeOut();
$(‘#wrap’).attr({style:”});
$( ‘html, body’ ).prop( { scrollTop: current_scrollY } );
$(“#popback”).fadeOut();

});
$(“#overon”).click(function() {
$(“#overlay”).fadeOut();
$(‘#wrap’).attr({style:”});
$( ‘html, body’ ).prop( { scrollTop: current_scrollY } );
$(“#popback”).fadeOut();

});

$(window).keyup(function(e){
if(e.keyCode == 27){
$(“#overlay”).fadeOut();
$(‘#wrap’).attr({style:”});
$( ‘html, body’ ).prop( { scrollTop: current_scrollY } );
$(“#popback”).fadeOut();

}
});

});

 

 

これだとうまくいかなかったので、

 

色々とz-indexをjqueryで指定してみたりしたのですがうまくいかず、

どうしようと途方にくれながら、

 

横からスライドさせるようにしようかとか悩んだのですが、

 

なんとか動作は同じっぽく修正できました。

 

#popbox{
text-align:left;
position:absolute;
top:5%;
right:5%;
left:5%;
background:rgba(255,255,255,.7);
display:none;

#overlay{

background: rgba(0,0,0,0.7);
display: block;
width: 100%;
text-align: center;
z-index: 98;
position:fixed;

left:0;
top:0;
right:0;
bottom:0;

}

で、overlay >popboxから overlayとpopboxを別々の要素に分けて

 

$(function() {
var current_scrollY;

$(“button”).click(function() {
current_scrollY = $( window ).scrollTop();
$(‘#wrap’).css({
position:’fixed’,
width:’100%’,
top:-1 * current_scrollY,
});

$(“#overlay”).css(“display”,”block”);
$(“#popbox”).css(“display”,”block”);
$( ‘html, body’ ).prop( { scrollTop: 0 } );

$(“#popbox”).focus();
});
$(“#close”).click(function() {
$(“#overlay”).fadeOut();
$(‘#wrap’).attr({style:”});
$( ‘html, body’ ).prop( { scrollTop: current_scrollY } );

$(“#overlay”).css(“display”,”none”);
$(“#popbox”).attr({style:”});
});

$(“#overlay”).click(function() {
$(“#overlay”).fadeOut();
$(‘#wrap’).attr({style:”});
$( ‘html, body’ ).prop( { scrollTop: current_scrollY } );
$(“#overlay”).css(“display”,”none”);
$(“#popbox”).attr({style:”});

});

$(window).keyup(function(e){
if(e.keyCode == 27){
$(“#overlay”).fadeOut();
$(‘#wrap’).attr({style:”});
$( ‘html, body’ ).prop( { scrollTop: current_scrollY } );

$(“#overlay”).css(“display”,”none”);
$(“#popbox”).attr({style:”});

}
});

});

としてみました。

(適当にコピペしたのでもしかしたら間違えているかもしれません。)

 

動作としてはほとんど同じですが、下5%分空けてた分の見た目が変わりました。

 

androidのfixed関係は悩ましいですね。

 
Share on Facebook

見積もり・問い合わせフォーム
ガチ株式会社へのお仕事ご依頼・お見積もりの問い合わせはこちらから送信ください。
ホームページ作成
PHP制作依頼
wordpressカスタマイズ依頼
システム開発見積もり依頼
飲食店販促サービス問い合わせ
求人
会ってみたい!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です