如何使用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>