CSS使用记录CSS透明度叠加遇到多级菜单色彩分层需求，用到了透明度叠加。计算公式为1-(1-x)*(1-y)。下拉滚

CSS透明度叠加

遇到多级菜单色彩分层需求，用到了透明度叠加。计算公式为1-(1-x)*(1-y)。

<body>
    <div style="background-color: rgb(33, 139, 54,0.4);width: 100px;height: 100px;">
        <div style="background-color: rgb(33, 139, 54,0.4);width: 50px;height: 50px;">
            
        </div>
    </div>
    <div style="background-color: rgb(33, 139, 54,0.64);width: 100px;height: 100px;"></div>
</body>
//1-0.4*0.4=0.64

自定义滚动条样式

下拉滚动条样式调整

.container { max-height: 200px; overflow-y: scroll; } 
.container::-webkit-scrollbar { width: 0.5em; background-color: white; } 
.container::-webkit-scrollbar-thumb { border-radius: 0.25em; background-color: red; } 
<div class="container"> 
    <div>12122121</div><div>12122121</div><div>12122121</div><div>12122121</div> 
    <div>12122121</div><div>12122121</div><div>12122121</div><div>12122121</div> 
    <div>12122121</div><div>12122121</div><div>12122121</div><div>12122121</div> 
</div>

随着数据加载滚动条自动滚动到底部

数据加载时自动滚动

this.changeCheck.detectChanges();//先渲染数据
let scorll = document.getElementById('t2-container');//t2-container为限制max-height的滚动区域窗口
scorll.scrollTop = scorll.scrollHeight; //自动滚动到底部