見出し画像
Photo by ryonakano

#101 iOS Safariでスクロールバーが出ない仕様を回避する方法

em

iOS Safariはデフォルトで、スクロールバーを表示しないという、とんでもない仕様になった。ので、どうにかこうにかしてスクロールバーを無理やり表示させます。

結論：SimpleBarというプラグインを入れる

やり方
CDNでプラグインを読み込む

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.5/simplebar.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.5/simplebar.min.js"></script>

HTML側にdata属性をつける

<div class="modal__inner" data-simplebar data-simplebar-auto-hide="false">
   <img src="" alt="" class="js_input_img">
</div>

  • data-simplebar：simplebarを使う

  • data-simplebar-auto-hide="false"：スクロールバーを自動的に隠さない

CSSでスクロールバーのデザインしたい人はする

.simplebar-scrollbar::before {
    background-color: #0e357f
}
.simplebar-track.simplebar-vertical {
    width: 12px;
}
.simplebar-track {
    background: rgba(0, 0, 0, 0);
    width: 6px;
}
.simplebar-scrollbar {
    background: #0e357f;
    border-radius: 3px;
    top: 0;
    right: 2px;
}

モーダルの場合、閉じると、もう一回開く時に、scrolltopが0になってくれないので、下記を閉じるボタンのイベントに、
$('.simplebar-content-wrapper').scrollTop(0);　を追記

$('.js_close, .over-ray').on('click', function(){
    $('.simplebar-content-wrapper').scrollTop(0);
    $('.over-ray').removeClass('active');
});

デモ
https://www.tech.ellyblossom.com/wawa/ui/modal.html

参考


この記事が気に入ったらサポートをしてみませんか？