问题
我有两个带有溢出滚动条的 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() );
});
});
最佳答案
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
右侧的垂直滚动条在给它一些高度后。
关于css - webkit 滚动条上的不同宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27921303/