webkit滚动条上的宽度不同

Question

问题

我有两个带溢出滚动条的div。两者都有相同的宽度。不过，他们的宽度不同。

这是一个CSS问题，但我添加了一些JS。它可以拖动底部滚动条以影响顶部滚动条。

我只希望它适用于Chrome等网络浏览器。

Jsfiddle：http://jsfiddle.net/jedrga5w/3/

HTML

<div class="mmt">
    <div class="mmt-scrollbar">
        <div></div>
    </div>
    <div class="mmt-cropped">
        <div>Content2</div>
    </div>
</div>

CSS

.mmt-cropped {
    height: 200px;
    background: #eee;
}
.mmt-cropped,
.mmt-scrollbar {
    overflow-x: auto;
    width: 532px;
}

.mmt-cropped div,
.mmt-scrollbar div {
   width: 770px;
}

.mmt-cropped::-webkit-scrollbar,
.mmt-scrollbar::-webkit-scrollbar {
    -webkit-appearance: none;
}

.mmt-cropped::-webkit-scrollbar:horizontal,
.mmt-scrollbar::-webkit-scrollbar:horizontal {
    height: 11px;
}

.mmt-cropped::-webkit-scrollbar-thumb,
.mmt-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, .2);
}

.mmt-cropped::-webkit-scrollbar-track,
.mmt-scrollbar::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
}

.mmt-scrollbar,
.mmt-scrollbar div {
    height: 11px;
}

JS - 不需要

只需将底部滚动条连接到顶部滚动条。不是必需的，但它可以更容易地发现问题。

jQuery(window).load(function($) {
    $('.mmt-cropped').scroll(function(){
         $('.mmt-scrollbar').scrollLeft( $('.mmt-cropped').scrollLeft() );
    });
});

Answer 1

<强> Demo

CSS

.mmt-scrollbar,
.mmt-scrollbar div {
    height: 11px;
    overflow-y:hidden; /* add this as there is a vertical scrollbar bar which is occupying some space */ 
}

你可以通过给一些高度找到滚动条（ Demo ）

.mmt-scrollbar,
.mmt-scrollbar div {
    height: 100px;
}

---

注意：.mmt-scrollbar div右边的垂直滚动条给它一些高度。