angular-zorro 下拉框长度超出解决

angular-zorro 下拉框长度超出解决,并统一滚动条样式

CSS滚动条选择器
你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
::ng-deep .ant-select-dropdown .full-width .cdk-virtual-scroll-content-wrapper{
    position: absolute;
    overflow: scroll; // 关键
}
::ng-deep .ant-select-item-option-content {
    overflow: inherit; // 关键
    white-space: nowrap;
    text-overflow: initial;
}
::ng-deep .full-width::-webkit-scrollbar {
    width: 6px;
}
::ng-deep .full-width::-webkit-scrollbar-thumb {
    background: #818EA5;
    border-radius: 3px;
}
::ng-deep .full-width::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
}

效果:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/junjiahuang/article/details/107288273