html - 如何使用 webkit 滚动条更改样式并且不调整元素大小

Question

我使用 -webkit 代码来更改 chrome 中的样式滚动条，但我遇到了一个问题！！！我的问题是当滚动条出现时我的元素向右移动虽然我想要滚动条出现时我的元素不移动请指导我。

这是我的代码：

用于滚动的 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>