如何隐藏一个元素中位于另一个元素后面的溢出部分

Question

我正在制作一个自定义进度条。基本上，我有一个.fill矩形容器，它位于.progress容器后面，该容器具有透明背景，占据相同的宽度，但具有圆角。

这是我的代码：

HTML

<p><button onclick="updateProgress()">Click me</button></p>
<div id="profileSetupProg" class="progress">
<div class="fill"></div>
</div>

SCSS

.progress {
$height: 50px;
width: 300px;
height: $height;
position: relative;
background: grey;
border-radius: $height/2;
background: none;
border: 2px solid #000;

.fill {
width: 0%;
height: 100%;
position: absolute;
background-color: lightgreen;
left: 0px;
top: 0px;
z-index: -1;
overflow: hidden;
}
}

JS

progress = 0;
function updateProgress() {
var prog = document.getElementById("profileSetupProg");
var fill = prog.querySelector('.fill');
progress += 5;
fill.style.width = progress + "%";
}

Answer 1

您刚刚错过了进度类中的溢出选项进度类需要溢出：隐藏属性。这里是你在代码笔上的问题的解决方案，它在溢出的情况下正常工作。https://codepen.io/salmanaabir/pen/BaQVprZ

.progress {
$height: 50px;
width: 300px;
height: $height;
position: relative;
background: grey;
border-radius: $height/2;
background: none;
border: 2px solid #000;
overflow: hidden;
.fill {
width: 0%;
height: 100%;
position: absolute;
background-color: lightgreen;
left: 0px;
top: 0px;
z-index: -1;
}
}