Hola, tengo un problema. Estoy tratando de hacer que mi página sea RWD, pero el problema es que crea overflow_x cuando interSectionObserver carga las secciones, y hace que el posicionamiento en la página muera, pero cuando llega al final de la página, todo está arreglado. Se puede encontrar más código en mi github, pero no estoy seguro de tener permiso para pegarlo.
CSS
.section { transition: opacity 1s, transform 1s; } .hidden-section { opacity: 0; transform: translateY(7rem); }JS:
_revealSection() { const sections = document.querySelectorAll('.section'); const options = { root: null, threshold: 0.15, rootMargin: "0px", } const showSection = ((entries, observer) => { const [entry] = entries; if (!entry.isIntersecting) return entry.target.classList.toggle('hidden-section') observer.unobserve(entry.target) }) const sectionFadeIn = new IntersectionObserver(showSection, options); sections.forEach(sec => { sec.classList.add('hidden-section') sectionFadeIn.observe(sec) } ) } HTML: <section class="section" id="section--5"> <div class="contact"> <h1 class="contact__header">Are you ready for an new experience?</h1> <button class=" modal-button contact__button" data-but="4">contact us</button> </div>De acuerdo, el problema estaba en html y en la etiqueta del cuerpo.
html, body { width: 100; overflow-x: hidden; }