css - webkit 滚动条上的不同宽度

Question

问题

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

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

我只希望它能与 Chrome 等 webkit 浏览器一起使用。

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 右侧的垂直滚动条在给它一些高度后。