如何将滚动条放置在div之外

Question

我在div上设置了overflow: auto。当显示scrollbar时，div的width减小，但我想保持div的宽度。我怎样才能做到这一点？

Answer 1

使用overflow: overlay(链接(代替overflow: scrollbar：

的行为与auto相同，但滚动条绘制在内容顶部，而不是占用空间。仅在基于WebKit(例如Safari(和基于Blink(例如Chrome或Opera(的浏览器中支持。

附加

滚动条(overflow: scrollbar(采用div的width，但是，您可以自定义滚动条，甚至隐藏它(如何设置滚动条样式(：

body {
height: 250vh;
}
/* width */
::-webkit-scrollbar {
width: 15px; /* you can shrink taken width */
}
/* Track */
::-webkit-scrollbar-track {
background: transparent; 
}

/* Handle */
::-webkit-scrollbar-thumb {
background: red; 
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555; 
}