html - Webkitスクロールバーのスタイルを変更し、要素のサイズを変更しない方法

Question

クロムでスタイルスクロールバーを変更するために-webkitコードを使用していますが、1つの問題があります!!! 私の問題は、スクロールバーが表示されるときに要素が右に移動することです。スクロールバーが表示されるときに要素が移動しない間、それについて教えてください。

これは私のコードです:

スクロール用の Webkit コード:

/* Let's get this party started */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.4); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0,0,0,0.4); 
}

これはスクロールを取得する私のリストです:

<ul id="friend-list">
    <li class="on" id="1" conversation="">
        <button class="conver-link">
            <div class="state">
                <div class="friend-img"></div>
            </div>
            <div class="friend-detail">
                <div class="friend-name">
                    <span>Amirhossein</span>
                </div>
                <div class="friend-state"><span class="stat">Online Now</span></div>
            </div>
            <div class="friend-profile"></div>
        </button>
    </li>
    <li class="on" id="2" conversation="">
        <button class="conver-link">
            <div class="state">
                <div class="friend-img"></div>
            </div>
            <div class="friend-detail">
                <div class="friend-name">
                    <span>Mohammad</span>
                </div>
                <div class="friend-state"><span class="stat">Online Now</span></div>
            </div>
            <div class="friend-profile"></div>
        </button>
    </li>
    <li class="bs" id="3" conversation="">
        <button class="conver-link">
            <div class="state">
                <div class="friend-img"></div>
            </div>
            <div class="friend-detail">
                <div class="friend-name">
                    <span>Mohammad Javad</span>
                </div>
                <div class="friend-state"><span class="stat">Busy Now</span></div>
            </div>
            <div class="friend-profile"></div>
        </button>
    </li>
    <li class="bs" id="4" conversation="">
        <button class="conver-link">
            <div class="state">
                <div class="friend-img"></div>
            </div>
            <div class="friend-detail">
                <div class="friend-name">
                    <span>Hamidreza</span>
                </div>
                <div class="friend-state"><span class="stat">Busy Now</span></div>
            </div>
            <div class="friend-profile"></div>
        </button>
    </li>
    <li class="bs" id="5" conversation="">
        <button class="conver-link">
            <div class="state">
                <div class="friend-img"></div>
            </div>
            <div class="friend-detail">
                <div class="friend-name">
                    <span>Saeid</span>
                </div>
                <div class="friend-state"><span class="stat">Busy Now</span></div>
            </div>
            <div class="friend-profile"></div>
        </button>
    </li>
    <li class="of" id="6" conversation="">
        <button class="conver-link">
            <div class="state">
                <div class="friend-img"></div>
            </div>
            <div class="friend-detail">
                <div class="friend-name">
                    <span>Mehdi</span>
                </div>
                <div class="friend-state"><span class="stat">Offline Now</span></div>
            </div>
            <div class="friend-profile"></div>
        </button>
    </li>
    <li class="of" id="7" conversation="">
        <button class="conver-link">
            <div class="state">
                <div class="friend-img"></div>
            </div>
            <div class="friend-detail">
                <div class="friend-name">
                    <span>Mehdi</span>
                </div>
                <div class="friend-state"><span class="stat">Offline Now</span></div>
            </div>
            <div class="friend-profile"></div>
        </button>
    </li>
    <li class="of" id="8" conversation="">
        <button class="conver-link">
            <div class="state">
                <div class="friend-img"></div>
            </div>
            <div class="friend-detail">
                <div class="friend-name">
                    <span>Mehdi</span>
                </div>
                <div class="friend-state"><span class="stat">Offline Now</span></div>
            </div>
            <div class="friend-profile"></div>
        </button>
    </li>
</ul>