@tqwko_05posted at 2021-01-21

Webブラウザでoverflow-x:scroll;が効かない

Q&A

解決したいこと

PCブラウザで「overflow-x:scroll;」が効かなくて困っています。。。
実現したいことはWebブラウザで複数の画像を横並びで表示し、規定の枠からはみ出した画像を非表示にし、マウスのドラッグで横スクロールをさせることです。

以下にHTMLとCSSを記載します。

＜HTML＞

    <div class="scrollContent">
        <h3>画像１</h3>
        <ul class="scrollList">
            <li>
                <a class="hoge" href="hogehoge">
                    <img src="hoge1.jpg" alt="hoge">
                </a>
            </li>
        </ul>
        <h3>画像２</h3>
        <ul class="scrollList">
            <li>
                <a class="hoge" href="hogehoge">
                    <img src="hoge2.jpg" alt="hoge">
                </a>
            </li>
        </ul>
    </div>

＜CSS＞

.scrollList{
    overflow-x: scroll;
    white-space: nowrap;
 }

.scrollList li {
    overflow: hidden;
    display: inline-block;
    position: relative;
    line-height: 150%;
 }

試したこと

・「overflow-x: scroll;」を実装するには「white-space: nowrap;」が必要であることが分かったため.scrollListに実装してみました。
・x座標指定を除いた「overflow: scroll;」でも効果なし。
・試しに「.scrollList li 」のクラスに実装しましたが、各画像にスクロールバーが表示されただけになりました。

解決法ご存知の方いらっしゃいましたらご教示願います。
よろしくお願いいたします！

1Answer

@mogamoga1337 posted at 2021-01-21

？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
    .scrollList {
        overflow-x: scroll;
        white-space: nowrap;
    }

    .scrollList li {
        overflow: hidden;
        display: inline-block;
        position: relative;
        line-height: 150%;
    }
    </style>
</head>
<body>
    <div class="scrollContent">
        <h3>画像１</h3>
        <ul class="scrollList">
            <li>
                <a class="hoge" href="hogehoge">
                    <img src="hoge1.jpg" alt="hoge">
                </a>
            </li>
            <li>
                <a class="hoge" href="hogehoge">
                    <img src="hoge1.jpg" alt="hoge">
                </a>
            </li>
            <li>
                <a class="hoge" href="hogehoge">
                    <img src="hoge1.jpg" alt="hoge">
                </a>
            </li>
            <li>
                <a class="hoge" href="hogehoge">
                    <img src="hoge1.jpg" alt="hoge">
                </a>
            </li>
            <li>
                <a class="hoge" href="hogehoge">
                    <img src="hoge1.jpg" alt="hoge">
                </a>
            </li>
            <li>
                <a class="hoge" href="hogehoge">
                    <img src="hoge1.jpg" alt="hoge">
                </a>
            </li>
            <li>
                <a class="hoge" href="hogehoge">
                    <img src="hoge1.jpg" alt="hoge">
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

0Like

Are you sure you want to delete the question?

Webブラウザでoverflow-x:scroll;が効かない

解決したいこと

試したこと

1Answer

Your answer might help someone💌