Блог

Главная - Вопросы по программированию - Как скрыть переполняющую часть элемента, которая находится за другим элементом?

Как скрыть переполняющую часть элемента, которая находится за другим элементом?

#javascript #css

Вопрос:

Я создаю пользовательский индикатор выполнения. В основном у меня есть .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   "%";
}

Комментарии:

1. Не overflow:hidden должно быть на родительском элементе?

Ответ №1:

вы только что пропустили опцию переполнения в классе выполнения. класс прогресса нуждается в переполнении:скрытое свойство. Вот решение ваших проблем в codepen , оно работает там правильно с переполнением. 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;
      }
   }
Метки: ,