Funciona cuando cambio manualmente el tamaño de la ventana, pero no cuando cambia la altura del contenido, que es lo que necesito.
¿Estoy haciendo algo mal?
class MainContainer extends React.Component { constructor(props) { super(props); this.containerRef = React.createRef(); this.containerObserver = null; this.state = { top: false, }; } componentDidMount() { this.containerObserver = new ResizeObserver((e) => this.handleResize(e)); this.containerObserver.observe(this.containerRef.current); } componentWillUnmount() { if (this.containerObserver) { this.containerObserver.disconnect(); } } handleResize = (e) => { const { target } = e[0]; const top = target.scrollTop; const scrollHeight = target.scrollHeight; const position = scrollHeight - top; const clientHeight = target.clientHeight; console.log({ top }, { scrollHeight }, { position }, { clientHeight }); if (top < 10) { if (this.state.top) { this.setState({ top: false }); } } else { if (!this.state.top) { this.setState({ top: true }); } } if (position >= clientHeight - 40 && position <= clientHeight) { if (!this.state.top) { this.setState({ top: true }); } } }; render() { return ( <React.Fragment> <Container ref={this.containerRef} onScroll={this.handleScroll}> <Body /> </Container> <ShadowTop show={this.state.top} /> </React.Fragment> ); } }--
export const Container = styled.div` @media (max-width: 760px) { position: absolute; } margin-top: ${({ theme }) => theme.header.height.percent}%; margin-top: -webkit-calc(${({ theme }) => theme.header.height.pixel}px); margin-top: -moz-calc(${({ theme }) => theme.header.height.pixel}px); margin-top: calc(${({ theme }) => theme.header.height.pixel}px); height: ${({ theme }) => Math.abs(100 - theme.header.height.percent)}%; height: -webkit-calc(100% - ${({ theme }) => theme.header.height.pixel}px); height: -moz-calc(100% - ${({ theme }) => theme.header.height.pixel}px); height: calc(100% - ${({ theme }) => theme.header.height.pixel}px); position: fixed; float: none; clear: both; top: 0; right: 0; width: ${({ theme }) => 100 - theme.sidebar.width.percent}%; width: -webkit-calc(100% - ${({ theme }) => theme.sidebar.width.pixel}px); width: -moz-calc(100% - ${({ theme }) => theme.sidebar.width.pixel}px); width: calc(100% - ${({ theme }) => theme.sidebar.width.pixel}px); z-index: 2; pointer-events: auto; overflow: auto; `;Lo resolvió usando un MutationObserver con el subtree habilitado.
this.containerObserver = new MutationObserver(this.handleResize); this.containerObserver.observe(this.containerRef.current, { childList: true, subtree: true, });