如何更改水平滚动条轨道的宽度？

Question

我正在尝试制作底部带有滚动条的图像滑块。图片应全屏显示，活动图片居中，活动图片左右各有一张图片，如图所示。

滚动条不应粘在滑块上。我试图通过以下方式实现它。但是无法修复。

在@kip 的帮助下更新。我需要为将显示在中心的活动图像删除 class，并为所有其他图像添加 class。 'class name : img-slider-other'

<style>
    .slider {
        width: 100%;
        text-align: center;
        overflow: hidden;
        display: flex;
        justify-content: center;
    }
    
    .slides {
        display: flex;
        overflow-x: scroll;
        margin-bottom: 50px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    
    .slides::-webkit-scrollbar {
        width: 10px;
        height: 20px;
    }
    
    .slides::-webkit-scrollbar-thumb {
        background-color: #737373;
        border-radius: 10px;
    }
    
    .slides::-webkit-scrollbar-track {
        background: transparent;
        border: 1px solid #ccc;
        max-width: 60% !important;
        margin-left: 30.75rem;
        margin-right: 30.75rem;
    }
    
    .slides::-webkit-scrollbar-track-piece {
        max-width: 200px;
        background-color: #fff;
        height: 200px;
        border: 1px solid #ccc;
        /* border-radius: 10px; */
    }
    /* .slides::-webkit-scrollbar-corner {
        border-radius: 10px;
    } */
    
    .slides>div {
        scroll-snap-align: center;
        flex-shrink: 0;
        /* width: 100%;
        max-width: 100%; */
        width: 60%;
        max-width: 60%;
        /* height: auto;  */
        height: 500px;
        /* For Temp */
        margin-right: 50px;
        margin-bottom: 50px;
        border-radius: 10px;
        /* background: #eee; */
        transform-origin: center center;
        transform: scale(1);
        transition: transform 0.5s;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 100px;
    }
    
    img {
        /* object-fit: cover; */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    body {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .img-slider-other {
        height: 80%;
        top: auto;
        opacity: 0.5;
    }
</style>

    <div class="slider">
    <div class="slides" id="slides">
        <div id="slide-1">
            <img src="c1.png" />
        </div>
        <div id="slide-2">
            <img src="c2.png" />
        </div>
        <div id="slide-3">
            <img src="c3.png" />
        </div>
        <div id="slide-4">
            <img src="c4.png" />
        </div>
        <div id="slide-5">
            <img src="c5.png" />
        </div>
    </div>
</div>


<script>
    $(document).ready(function() {
        var IDs = [];
        var selctedImg = 'slide-3';
        $(".slides").find("div").each(function() {
            IDs.push(this.id);
        });
        document.getElementById(selctedImg).scrollIntoView({
                behavior: "smooth",
                block: "end",
                inline: "nearest",
                callback: scrollEvent()
            }
        );

        function scrollEvent() {
            IDs.forEach(element => {
                console.log("el", element)
                if (selctedImg !== element) {
                    $('#' + element).children('img').addClass('img-slider-other');
                }
            });
        }
    });
</script>

Answer 1

是这样的吗？

.slider {
            width: 100%;
            text-align: center;
            overflow: hidden;
        }
        
        .slides {
            display: flex;
            overflow-x: auto;
            margin-bottom:50px;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
        }
        
        .slides::-webkit-scrollbar {
            width: 10px;
            height: 20px;
        }
        
        .slides::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 10px;
        }
        
        .slides::-webkit-scrollbar-track {
            background: transparent;
            border: 1px solid #ccc;
            max-width: 60% !important;
            margin-left:25vw;
            margin-right:25vw;
        }
        
        .slides::-webkit-scrollbar-track-piece {
            max-width: 200px;
            background-color: #337ab7;
            height: 200px;
        }
        
        .slides>div {
            scroll-snap-align: start;
            flex-shrink: 0;
            width:70%;
            max-width: 70%;
            /* height: auto;  */
            height: 500px;
            /* For Temp */
            margin-right: 50px;
            margin-bottom:50px;
            border-radius: 10px;
            background: #eee;
            transform-origin: center center;
            transform: scale(1);
            transition: transform 0.5s;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 100px;
        }
        
        img {
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
        <div class="slides">
            <div id="slide-1">
                1
            </div>
            <div id="slide-2">
                2
            </div>
            <div id="slide-3">
                3
            </div>
            <div id="slide-4">
                4
            </div>
            <div id="slide-5">
                5
            </div>
        </div>
    </div>

如何更改水平滚动条轨道的宽度？

How to change the width of horizontal scrollbar track?

html

css

jquery

bootstrap-4

image-slider