是否可以强制垂直滚动条的高度小于其所属可滚动 div 的 100%使用纯 CSS 并适用于除 IE 之外的所有现代浏览器?
到目前为止我想出的只是仅限 webkit解决方案与它的::-webkit-scrollbarCSS 选择器和自定义按钮高度的技巧，如下所示：
.parent {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid #000000;
box-sizing: border-box;
overflow-y: scroll;
}
.child {
height: 200%;
width: 100%;
overflow: hidden;
}
.parent::-webkit-scrollbar {
width: 12px;
}
.parent::-webkit-scrollbar-track {
border: 1px solid #000000;
}
.parent::-webkit-scrollbar-thumb {
background: #FF0000;
}
.parent::-webkit-scrollbar-button {
background: transparent;
height: 25%;
}
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
我试图欺骗.parent with transform: scale仅在一个方向上，因此要缩小父项并以相同的值增加内容，如下所示：
.parent {
transform: scale(0.5, 1);
}
.child {
transform: scale(2, 1);
}
...但它不起作用，因为子级无法在没有绝对位置的情况下扩展父级的尺寸，这使得它对父级不可见，并且滚动条不必要。
如果还有其他方法，我会洗耳恭听，因为我更喜欢 CSS 而不是额外的 JS 插件/库/包。
这是纯 CSS 问题。我知道有 JS 插件可以创建我想要的任何滚动条。
您可以使用::-webkit-scrollbar-track-piece自定义进度条的最顶层。在这种情况下，它不会是父级高度的 100%。
.parent {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid #000000;
box-sizing: border-box;
overflow-y: scroll;
}
.child {
height: 200%;
width: 100%;
overflow: hidden;
}
.parent::-webkit-scrollbar {
width: 12px;
}
.parent::-webkit-scrollbar-track {
/*border: 1px solid #000000;*/
}
.parent::-webkit-scrollbar-thumb {
background: #FF0000;
}
.parent::-webkit-scrollbar-button {
background: transparent;
/*height: 25%;*/
}
/* this will do the trick */
.parent::-webkit-scrollbar-track-piece {
margin-top: 1rem;
margin-bottom: 1rem;
border: 1px solid #000000;
}
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
