Логика для скрытия элементов в списке при недостаточной ширины контейнера?

Question

[lavezzi1]

Здравствуйте. Есть горизонтальный список элементов, нужно полностью скрывать элементы которые не вмещаются в контейнер. Беру из props массив с элементами, создаю новый и добавляю поле hidden: false, вещаю handler на onresize, слежу когда общая сумма ширины всех элементов становится меньше длины контейнера, а дальше что делать? Рекурсией скрывать элементы или вычислять index последнего скрытого элемента?

Comments

[ksnk]

А зачем скрьптом скрывать ? Контейнеру поставь overflow:hidden и он сам скроет все, что не влезло.
Ну, ежели нужно таки скриптом, то тут может помочь getBoundingClientRect. Возвращает объект с границами элемента, относительно парента. ПРобежаться по всем чилдам и тех, у которых right больше ширины парента - скрыть. Вот только если скрыть (display:none), то будет перерисовываться контейнер и кто его знает, как расположатся после этого оставшиеся видимые элементы. Лучше им делать visibility: hidden, вместе с контейнерным overflow:hidden. так они будут свое место продолжать занимать, но не высовывать свои невлезающие кусочки

Answer 1

[RAX7]

Если используется нативный скрол, то можно повешать Intersection Observer