|
Сообщение от 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>