fancyboxのモーダルでiphoneでのスクロール対応

  • LINEで送る

fancyboxを使用してモーダル表示している場合、iphoneのバージョンによってはモーダル内のスクロールができないことがある。
※2本指でスクロールすると、モーダル内がスクロールするiphoneのバージョンもある。そのバージョンも以下の対応で1本指でスクールすることが可能

対応するにはfancyboxのoptionでonCompleteを使用し、スクロールできるようにする。

以下、サンプルコード

// オプション
var option = {
    'width': 740,
    'height': '85%',
    'type' : 'iframe',
    // スクロールしてもmodalwindowを中心にするか
    // [true:中心にする、false:中心にしない]@default:false
    'centerOnScroll' : 'true',
    // モーダル表示完了時に行う処理
    'onComplete':function(){
        // iphoneでiframe内がスクロールできない対応
        $('#fancybox-content').css('-webkit-overflow-scrolling', 'touch');
        $('#fancybox-content').css('overflow', 'auto');
    }
};

SNSでもご購読できます。

コメントを残す

*

CAPTCHA