webkit滚动条上的不同宽度答案

【问题标题】：Different width on webkit scrollbarswebkit滚动条上的不同宽度
【发布时间】：2015-03-11 08:37:33
【问题描述】：

问题

我有两个带有溢出滚动条的 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 - 不需要

只是为了将底部滚动连接到顶部 scoll。不是必需的，但它更容易发现问题。

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

【问题讨论】：

标签： css google-chrome webkit scrollbar overflow

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

【讨论】：