Использование MutationObserver для обнаружения, когда содержание/дети элемента переполнили этот элемент ⇐ Javascript

[Anonymous]

Ниже приведен мой пользовательский крючок React для обнаружения, когда содержание/дети элемента/ref.current переполнили этот элемент/ref.current.

Код: Выделить всё

export function useOverflowObserver({
ref,
on_resize_cb,
ref_reset_trigger = [],
}) {
const [unexpectedly_overflowed, set_unexpectedly_overflowed] =
useState(false); // false, true

const overflow_checker_cb = () => {
if (ref && ref.current) {
console.log(ref.current.scrollHeight);
console.log(ref.current.scrollWidth);

console.log(ref.current.clientHeight);
console.log(ref.current.clientWidth);

const has_overflow =
ref.current.scrollHeight > ref.current.clientHeight ||
ref.current.scrollWidth > ref.current.clientWidth;

set_unexpectedly_overflowed(has_overflow);
on_resize_cb && on_resize_cb(has_overflow);
} else {
console.log("overflow_checker_cb: no ref provided to useResizeDetector");
}
};

// useMemo is optional
const observer = useMemo(() => {
return new ResizeObserver(overflow_checker_cb);
}, []);

// useMemo is optional
const mutation_observer = useMemo(() => {
return new MutationObserver(overflow_checker_cb);
}, []);

useEffect(() => {
if (ref && ref.current) {
observer.observe(ref.current);
mutation_observer.observe(ref.current, {
attributes: true, // needed
childList: true,
subtree: true,
characterData: true,
});
} else {
console.log("no ref provided to useResizeDetector");
}

return () => {
observer.disconnect();
mutation_observer.disconnect();
};
}, ref_reset_trigger);

return unexpectedly_overflowed;
}

Первоначально я использовал эти параметры конфигурации для mutationobserver :
{
childList: true,
subtree: true,
characterData: true,
}
< /code>
Но это не сработало. Итак, я добавил: < /p>
{
attributes: true,
childList: true,
subtree: true,
characterData: true
}

< /code>
И теперь он работает. Или этот список действительно исчерпывающий с целью обнаружения, когда контент/дети элемента переполняют своего родителя, то есть element/ref.current?

Подробнее здесь: https://stackoverflow.com/questions/796 ... as-overflo