Форум

LADYX · #1 (**permalink**) 01.06.2020, 12:22

Подскажите, пожалуйста, как показать дочерний элемент .hidden при условии, что большая часть его родительского элемента .item видна (именно по ширине, высота не имеет значения)? В противном случае дочерний элемент .hidden прятать. Спасибо.

<style>
.container {
  background-color: #f1f1f1;
  border: 2px solid black;
  width: 100%;
  height: calc(100vh - 60px);
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  margin-top: 50px;
}

.item {
  display: inline-block;
  background-color: gray;
  width: 100%;
  height: 100%;
  vertical-align: top;
  margin: 0 5vw;
}

.hidden {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 25px;
}
</style>
<div class="container">
  <div class="item"><div class="hidden">Один</div></div>
  <div class="item"><div class="hidden">Два</div></div>
  <div class="item"><div class="hidden">Три</div></div>
  <div class="item"><div class="hidden">Четыре</div></div>
</div>

рони · #2 (**permalink**) 01.06.2020, 15:59

Сообщение от LADYX

как показать дочерний элемент .hidden при условии, что большая часть его родительского элемента .item видна (именно по ширине,

можно так ...

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.container {
  background-color: #f1f1f1;
  border: 2px solid black;
  width: 100%;
  height: calc(100vh - 60px);
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  margin-top: 50px;
}

.item {
  display: inline-block;
  background-color: gray;
  width: 100%;
  height: 100%;
  vertical-align: top;
  margin: 0 5vw;
}

.hidden {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 25px;
}

.item.vis .hidden {
    display: block;
}

</style>
<script>
document.addEventListener('DOMContentLoaded', ready);
function ready()
{
   const root = document.querySelector('.container');
   const boxs = document.querySelectorAll('.item');
   function addCls() {
        const width = root.scrollWidth / boxs.length;
        const n = Math.floor((root.scrollLeft + width/2)/ width);
        boxs.forEach((item, i) => {
          item.classList.toggle('vis', n == i)
        });
      }
    root.addEventListener('scroll', addCls);
    addCls();
}

</script>
</head>
<body>

<div class="container">
  <div class="item"><div class="hidden">Один</div></div>
  <div class="item"><div class="hidden">Два</div></div>
  <div class="item"><div class="hidden">Три</div></div>
  <div class="item"><div class="hidden">Четыре</div></div>
</div>

</body>
</html>

LADYX · #3 (**permalink**) 01.06.2020, 16:08

рони,
как всегда вам огромное спасибо. Супер! Успехов вам! Будем теперь встраивать)

Форум

Справочник

Discord чат

Курсы javascript