webkit滚动条上的不同宽度

Question

问题

我有两个带溢出滚动条的div。两者的宽度是一样的。不过，它们的宽度不同。

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

我只希望它能与Chrome这样的webkit浏览器一起工作。

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

<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

演示

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 */ 
}

您可以通过给(演示)一些高度来找到滚动条

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

注意:在给出一些高度后，.mmt-scrollbar div 右侧的垂直滚动条。。

​

​