Как измерит высоту каждого элемента и внести изменение на каждое по отдельному в JS?

Question

[Миржалол Мирхомитов]

Работаю над страницей
В левой стороне есть фильтр по характеристикам(атрибутам). У каждого есть под пункты

Мне надо измерит высоту каждого под пункты и поставить проверку
Пробовал такие варианты:

const contentFilter = document.querySelectorAll('.sidebar-accardion__item .content-filter'),
      contentFilterHeight = document.querySelector('.sidebar-accardion__item .content-filter').clientHeight;                                                    

if(contentFilterHeight > 220) {
    contentFilter.forEach(item => {
        item.style.maxHeight = "220px";
        item.style.overflowY = "scroll"
    })
} else {
    contentFilter.forEach(item => {
        item.style.maxHeight = "fill-content";
        item.style.overflowY = "auto"
    })
}

const contentFilter = document.querySelectorAll('.sidebar-accardion__item .content-filter'),
      contentFilterHeight = document.querySelector('.sidebar-accardion__item .content-filter').clientHeight;  
contentFilter.forEach(item => {
    if(contentFilterHeight > 240) {
        item.style.maxHeight = "240px";
        item.style.overflowY = "scroll"
    } else {
        item.style.maxHeight = "fill-content";
        item.style.overflowY = "auto"
    }
})

У меня скроль появляется на всех подкатегориях.

Но на подкатегориях высотой меньше 240 не должно появляется скроль. Как это сделать?
В чем моя ошибка?. Покажите пжл правильный пут написание скрипта).

Comments

[Даниил Попов]

 А почему вы не используете overflow:auto? В чем состоит задача?

[Rustam Bainazarov]

div {
    max-height: 240px;
    overflow-y: auto;
}

Если нужна кроссбраузерная стилизация скролла, то сочетать с этим плагином:
https://kingsora.github.io/OverlayScrollbars/

Он не ломает нативный скроллинг.

Answer 1

[Илья Колин]

Сильно не вникал, тут в логике у тебя ошибка. Ты смотришь высоту первого элемента и на него равняешься, а надо перебирать все элементы и у каждого сравнивать высоту.
Думаю код должен выглядеть примерно так

const contentFilter = document.querySelectorAll('.sidebar-accardion__item .content-filter');                                                  

contentFilter.forEach(item => {
    if (item.clientHeight > 220) {
        item.style.maxHeight = "220px";
        item.style.overflowY = "scroll";
    } else {
        item.style.maxHeight = "fill-content";
        item.style.overflowY = "auto";
    }
});

Comments

[Миржалол Мирхомитов]

Я такое пробовал. Он ставить скроль только на первый элемент. На остальные он не действует.

[Илья Колин]

Михаил Миронов, в contentFilter точно querySelectorAll?
Если бы ссылку на страницу прислал, думаю тут больше бы ответов было. А так не видя структуры, больше как гадание

[Миржалол Мирхомитов]

https://texnomart.uz/ru/katalog/tehnika-dlya-doma/...
Вот ссылка на страницу). Жду помощи)

[Илья Колин]

Михаил Миронов,
я просто свой код в консоли вставил, и все заработало. Пробуй, может у тебя закешено было что ты изменений не увидел?
Мое решение рабочее. Не забудь отметить как решение :)

[Илья Колин]

Михаил Миронов, а, понял почему у тебя не работало.

На скрытых элементах конечно же не будет работать, так как они по высоте 0 в момент выполнения скрипта.
Значит тебе надо запихнуть это в функцию, и при разворачивании элемента выполнять.

Либо более простой способ - в css этому элементу задай
max-height: 220px;
overflow: auto.
С авто оверфлоу тоже будет работать, проверил

[Миржалол Мирхомитов]

Илья Колин, сработало) Спасибо)

Answer 2

[Марс Степанов]

Если посмотреть на второй блок кода повнимательней, то получается ты вычисляешь высоту одного блока, вместо того, чтобы вычислять высоту конкретного блока item внутри перебора forEach

Comments

[Миржалол Мирхомитов]

Что вы предлагаете делать?. Есть варианты решение у вас?

[Марс Степанов]

Михаил Миронов, для решения задачи нужен исходный код. Илья Колин правильно написал, нужно вычислять высоту при переборе. Приложите кусок кода фильтра и тогда решение не заставит себя ждать ;)

[Миржалол Мирхомитов]

https://texnomart.uz/ru/katalog/tehnika-dlya-doma/...
Ссылка на страницу. Можете отсюда посмотреть. Жду решение)ю Заранее спасибо)

Answer 3

[Марина]

Там достаточно на css прописать

.filter{
     max-height: 275px;
     overflow-y: auto;
}