弹窗屏幕居中自定义滚动条 css设置

最新推荐文章于 2022-07-29 14:19:34 发布

Embrace924

最新推荐文章于 2022-07-29 14:19:34 发布

阅读量384

点赞数 1

分类专栏： css 文章标签：滚动条自定义滚动条弹窗屏幕居中

本文链接：https://blog.csdn.net/Embrace924/article/details/82761225

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

弹窗屏幕居中：

半透明黑背景：
.black-wrap{
    position: absolute;
    width: 100%; 
    height: 100%;
    left: 0; 
    top: 0; 
    background: rgba(0, 0, 0, .5); 
    z-index: 999;
}

弹框内容：
.content{
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
}

自定义滚动条：

&::-webkit-scrollbar-thumb {
  background-color: rgba(136, 136, 136, .5);
  border-radius: 20px;
  z-index: 999;
}
&::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
&::-webkit-scrollbar-track {
  border-radius: 20px;
}