He estado tratando de implementar un botón de desplazamiento hacia arriba. Buscando en internet encontré este fragmento de código:
$('html, body').animate({scrollTop:0}, 'slow'); Estoy confundido, ¿por qué intentarían desplazarse tanto por el html como por body y luego jugar con el overflow: hidden en la etiqueta del body , noté que no puede tener una barra de desplazamiento tanto para el html como para el body ? Luego, en MDN, encontré otra forma de lograr lo mismo que:
window.scroll({ top: 0, left: 0, behavior: 'smooth' }); Como sabemos, la window es el objeto global, que obviamente no se puede desplazar.
window.scroll desplaza internamente el elemento html o el elemento del body ?body ? Probé overflow: hidden en html y luego overflow: scroll por el body pero no veo una barra de desplazamiento.
- ¿Window.scroll desplaza internamente el elemento html o el elemento del cuerpo?
Ninguno de los dos. Desplaza la ventana gráfica . La descripción precisa del desplazamiento se proporciona en la especificación de vista de CSSOM .
- ¿Se puede desplazar el elemento del cuerpo? Probé desbordamiento: oculto en html y luego desbordamiento: visible en el cuerpo pero no veo una barra de desplazamiento.
Sí. pero overflow: visible no mostrará una barra de desplazamiento. Necesita overflow: scroll o overflow: auto . Y para que se desplace, el contenido debe desbordar el cuerpo. p.ej
html { overflow: scroll; width: 630px; } body { height: 80px; overflow: auto; } Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Aquí puede ver dos barras de desplazamiento verticales. El que está en la ventana gráfica, obligado a mostrarse por el overflow: scroll en el elemento html, y el del cuerpo porque el contenido lo desborda y tiene overflow: auto .
Podemos hacer que ambas barras de desplazamiento se puedan desplazar si ambas están desbordadas por su contenido.
html { overflow: auto; border:2px solid red; } body { height: 110vh; /* overflows the viewport - but note: as you can see from the red and blue borders, not the html emlement. */ overflow: auto; border:2px solid blue; } p { height: 130vh; /* overflows the body element */ } <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>window.scroll() desplaza efectivamente el document.scrollingElement * que ahora se define como el elemento <html> , pero solía ser el elemento <body> en algunas AU y aún en modo Quirks.
Este document.scrollingElement es una adición relativamente reciente y es por eso que aún puede encontrar un código antiguo que se ocupó tanto de <body> como de <html> para respetar todos los navegadores.
* Según las especificaciones, se desplaza por la " ventana gráfica ", pero se reduce a lo mismo, ya que el paso 12 del algoritmo de scroll pasa el "elemento raíz del documento como el elemento asociado" a la operación real "Realizar un desplazamiento".
const frameContent = `<html> <body><h1 style='height:300vh'>%s Mode</h1> <script> scroll(0, 200); parent.postMessage({ compatMode: document.compatMode, html: document.documentElement.scrollTop, body: document.body.scrollTop, }, '*') <\/script>`; document.querySelectorAll("iframe").forEach((el, i) => { el.src = `data:text/html,` + encodeURIComponent( (i ? "<!DOCTYPE html>" : "") + // set the first frame to Quirk mode frameContent.replace("%s", i ? "Default" : "Quirk") ); }); onmessage = ({data}) => console.log(data) <iframe></iframe> <iframe></iframe>