const boxScroll = document.querySelector('.box__list_scroll');
const boxImgs = document.querySelectorAll('.box__imgs > .box__img');
boxScroll.addEventListener('scroll', event => {
const sh = event.target.scrollHeight;
const h = event.target.offsetHeight;
const y = event.target.scrollTop;
const len = boxImgs.length;
const t = y / (sh - h);
const index = Math.floor((len - 1) * t);
boxImgs.forEach((img, i) => img.classList.toggle('__active', i === index));
});json.sort(({ image: a }, { image: b }) => (!a && !b ? 0 : !a ? -1 : 1));table:has(tr:first-child th:nth-child(2):hover) td:nth-child(2),
th:nth-child(2):hover {
border-left: 1px solid red;
border-right: 1px solid red;
}nth-child(3), nth-child(4) и т.д.
Что точнее setInterval и setTimeout?
Какая альтернатива лучше?
resize в данном случае лучше использовать MediaQueryList: change event
<form method="get" action="servis">
<select name="utm_brand">
<option disabled selected>Бранд</option>
<option value="919" data-brand="919">Бранд_1</option>
<option value="920" data-brand="920">Бранд_2</option>
<option value="922" data-brand="922">Бранд_3</option>
</select>
<select name="utm_city">
<option disabled selected>Ваш город</option>
<option value="1201" data-city="1201">Абакан</option>
<option value="1214" data-city="1214">Аксай</option>
<option value="1210" data-city="1210">Альметьевск</option>
<option value="1206" data-city="1206">Артём</option>
</select>
<button type="submit">Подобрать</button>
</form>// layout.pug
html
head
block title
title Layout Default Title
body
block content// index.pug
extends layout.pug
block title
title Index page
block content
p Lorem ipsum dolor sit amet..reviews__wrapper {
padding: 0 0 40px 5vw;
}
.reviews__inner {
padding-bottom: 40px;
}