css

【CSS入門】爆速！LPコーディング効率化パーツ–スクロール

公開日 2024/1/31 最終更新日 2024/11/19

横スクロールできるバー

See the Pen scroll-horison by aimeimm (@aimeimm) on CodePen.


        <div class="c-modal__scroll-bar common-x-scroll">
        <div class=" c-box-width">
            <div class="box-wrapper">
                <div class="img-width"><img src="img/equipment1.png" alt=""></div>ああああああああ
            </div><!-- /.box-wrapper -->
            <div class="box-wrapper">
                <div class="img-width"><img src="img/equipment1.png" alt=""></div>あああああああああ
            </div><!-- /.box-wrapper -->
            <div class="box-wrapper">
                <div class="img-width"><img src="img/equipment1.png" alt=""></div>ああああああああ
            </div><!-- /.box-wrapper -->
            <div class="box-wrapper">
                <div class="img-width"><img src="img/equipment1.png" alt="">
                </div>あああああああああああ
            </div><!-- /.box-wrapper -->
            <div class="box-wrapper">
                <div class="img-width"><img src="img/equipment1.png" alt=""></div>あああああああああ
            </div><!-- /.box-wrapper -->

            <div class="box-wrapper">
                <div class="img-width"><img src="img/equipment1.png" alt=""></div>あああああああああ
            </div><!-- /.box-wrapper -->
            <div class="box-wrapper">
                <div class="img-width"><img src="img/equipment1.png" alt=""></div>あああああああああ
            </div><!-- /.box-wrapper -->
            <div class="box-wrapper">
                <div class="img-width"><img src="img/equipment1.png" alt=""></div>あああああああああ
            </div><!-- /.box-wrapper -->
            <div class="box-wrapper">
                <div class="img-width"><img src="img/equipment1.png" alt=""></div>あああああああああ
            </div><!-- /.box-wrapper -->
            <div class="box-wrapper">
                <div class="img-width"><img src="img/equipment1.png" alt=""></div>あああああああああ
            </div><!-- /.box-wrapper -->
        </div><!-- /.c-inner__flex -->
    </div><!-- /.c-box-container -->

 .box-wrapper {
            background-color: pink;
            margin-right: 10px;
            display: block;
            width: auto;
            padding: 5px;
        }

        .img-width {
            width: 300px;
        }

        .c-box-width {
            width: 800px;
            display: flex;
            flex-wrap: nowrap;
        }

        .c-modal__scroll-bar {
            overflow-x: auto;
            width: auto;
            max-width: 1000;
            height: 420px;
        }

        .c-modal__scroll-bar::-webkit-scrollbar {
            height: 5px;
            border-radius: 10px;
        }

        .c-modal__scroll-bar::-webkit-scrollbar-track {
            border-radius: 10px;
            background-color: #aaff7c;
        }

        .c-modal__scroll-bar::-webkit-scrollbar-thumb {
            background-color: #ffd23e;
        }

    <script>
        var cxs = document.querySelectorAll('.common-x-scroll');
        cxs = Array.prototype.slice.call(cxs, 0);
        cxs.forEach(function (el) {
            el.addEventListener("wheel", function (e) {
                if (e.deltaX === 0) {
                    var reg = 0.1; //スクロール量を変更する場合はここを調整

                    el.scrollLeft = el.scrollLeft + e.deltaY * reg;

                    e.preventDefault();
                }
            });
        });
    </script>

タグ