CSS 滚动条宽度 All In One

CSS 滚动条宽度 All In One

滚动条宽度

1. IE 16px
2. Chrome 12px

scrollbar width bug

改变设计稿的宽度，没考虑到 scrollbar width

solutions

1. hidden scrollbar width IE 不支持

scrollbar-width: none;

scrollbar-width: none;
scrollbar-width: thin;
scrollbar-width: auto;

https://css-tricks.com/almanac/properties/s/scrollbar-width/

https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

https://caniuse.com/?search=scrollbar-width

1. hidden ::-webkit-scrollbar IE 不支持

*::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  background: transparent;
}

1. margin-right: 负值

.tools-lib-container {
    box-sizing: border-box;
    position: absolute;
    top: 30px;
    left: 0;
    bottom: 0;
    right: -12px;
    padding: calc(30px);
    // padding: calc(30px - 12px / 2);
    // scrollbar-width: 16px
    background:#EEEEF0;
    // overflow: hidden;
    overflow: auto;
}

1. CSS overflow overlay IE 不支持

悬浮滚动条: 在触发滚动条时候并不挤压空间

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y

refs

自定义滚动条

https://www.cnblogs.com/xgqfrms/p/12972663.html

https://www.cnblogs.com/xgqfrms/p/9416358.html

https://www.cnblogs.com/xgqfrms/p/11798416.html

https://www.cnblogs.com/xgqfrms/p/12603952.html

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---