@bromo (BRM)posted at 2022-12-12

横に長い画像の横スクロールを実装したいです

Q&A

Closed

HTML CSS 横スクロール overflow-x

解決したいこと

横に長い画像を全体の画面幅からはみ出させて
画像だけ横スクロールできるように実装したいのですが
SPでは横スクロールできたのですがPCではできませんでした。

こちらの解決方法を知っている方いましたらご教授よろしくお願いいたします。

該当するソースコード


<div class="wrap">

    <div class="schedule">
        <div class="schedule--scroll">
            <img src="images/schedule.png" alt="">
        </div>
    </div>

</div>


.wrap {
    width: 100%;
    overflow: hidden;
}

.schedule {
    margin:50px 0;
    padding:0 50px;
    width: 100vw;
    height: auto;
    overflow-x: auto;
    white-space: nowrap;
}

.schedule::-webkit-scrollbar {  
    display:none;
}

.schedule--scroll {
    width: 3000px;
}

.schedule--scroll img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

自分で試したこと

全体幅が横にスクロールしてしまうズレが生じていたため
全体を包む wrap に overflow:hidden; をつけております。
※外して検証してみましたが変わらず横スクロールはできませんでした。

chromeの検証モードでモバイル検証ボタンを押すと画面幅ギリギリでも横スクロールできるのですが、
モバイル検証をしないとできませんでした。

お手数ですが、
この問題の解決方法を知っている方おられましたら
ご教授よろしくお願いいたします。

0 likes

1Answer

@ss8826 posted at 2022-12-12

横に長い画像を全体の画面幅からはみ出させて画像だけ横スクロールできるように

とりあえず、必要なもののみ記述するならこんな感じでしょうか。

sample.html

<style>
#wrap {
  overflow: auto;
}
#image {
  width: 3000px;
  height: 200px;
  background-image: repeating-linear-gradient(to right, #ddd, #ddd 10px, #0000 10px, #0000 30px), repeating-linear-gradient(to bottom, #bbb, #bbb 10px, #0000 10px, #0000 30px);
}
</style>

<div id='wrap'>
  <img id='image'>
</div>

0Like

Comments

@bromo
Questioner
ご回答ありがとうございます。

横にスクロールできない原因として、

.schedule::-webkit-scrollbar {
display:none;
}

でスクロールバーを消していることで
スクロールができないと発見しました。

そこで、追加でお聞きしたいのですが、
PCでスクロールバーを表示させることなく、
スクロールできるようにすることは可能なのでしょうか？

ご返信いただけますと幸いです。

Are you sure you want to delete the question?