Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
El controlador del evento onscroll
¡Miau! Tardo demasiado en desplazar la página. ¡Haz un botón para volver arriba!
La página principal del sitio de noticias en el que trabajamos en el curso inicial y en las partes anteriores es muy larga. Si una persona lee todas las noticias y quiere volver al inicio, tiene que desplazar la página durante un buen rato. Cupcake quiere que programemos un botón que lo haga automáticamente.
Al principio, el botón está oculto. Debe aparecer cuando el usuario haya desplazado la página más de 200px. ¿Por qué justo 200? ¡Solo el gato lo sabe! Al hacer clic en el botón, la página debe volver al inicio y el botón debe desaparecer.
Para cumplir el encargo del jefe, necesitamos saber cuándo se desplaza la página. JavaScript está al tanto de lo que sucede en la ventana del navegador, incluido el desplazamiento. Podemos indicarle qué hacer cuando la página se desplaza. Para ello, usaremos el controlador del evento onscroll. Se ejecuta cada vez que se desplaza la página, aunque sea un solo píxel.
Para detectar el desplazamiento en el sitio de noticias, agregaremos un controlador de eventos a la ventana del mininavegador. En JavaScript, la ventana o pestaña del navegador se representa con window:
window.onscroll = function () {
console.log('La página se ha desplazado');
}Comprobemos cómo funciona el controlador onscroll.
Podemos agregar un controlador del evento onscroll tanto a la ventana del navegador como a elementos individuales de la página. Para que se ejecute, el elemento debe tener su propia barra de desplazamiento. Podemos controlar el desplazamiento de un elemento con la propiedad CSS overflow.
Todos los archivos
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
<title>FlashNews!</title>
</head>
<body class="page light-theme">
<header class="page-header">
<div class="container">
<a class="header-logo">
<img src="img/main-logo.svg" width="67" height="29" alt="Logotipo del portal FlashNews!">
</a>
<a href="subscription.html" class="subscription-link">Suscripción</a>
<button class="theme-button" type="button">Cambiar tema</button>
</div>
</header>
<main class="index-main">
<div class="container">
<h1 class="visually-hidden">Portal de noticias FlashNews!</h1>
<div class="news-view">
<button class="row-view view-checked" type="button">Lista</button>
<button class="tile-view" type="button">Cuadrícula</button>
</div>
<section class="news-list">
<h2 class="visually-hidden">Todas las noticias</h2>
<article class="news-block" data-category="cats">
<img src="img/news-cat.jpg" alt="Ojos de un gato">
<div class="news-block-text">
<h3>¡Un video único!</h3>
<p>¡Mira el mundo a través de los ojos de un gato! Tu vida nunca volverá a ser la misma…</p>
<span class="news-tag">#Gatos</span>
<time datetime="2020-03-24">24 mar 2020</time>
</div>
</article>
<article class="news-block" data-category="HR">
<img src="img/walk.jpg" alt="Personas paseando">
<div class="news-block-text">
<h3>Salir a pasear puede ser bueno</h3>
<p>O puede que no, si no eliges bien la compañía…</p>
<span class="news-tag">#HR</span>
<time datetime="2020-03-19">19 mar 2020</time>
</div>
</article>
<article class="news-block" data-category="games">
<img src="img/ar.jpg" alt="Persona con lentes de realidad virtual">
<div class="news-block-text">
<h3>Amplía tu realidad</h3>
<p>El equipo de FlashNews! preparó un regalo para sus suscriptores…</p>
<span class="news-tag">#Juegos</span>
<time datetime="2020-02-18">18 feb 2020</time>
</div>
</article>
<article class="news-block" data-category="IT">
<img src="img/drone.jpg" alt="Dron pequeño">
<div class="news-block-text">
<h3>Dronvirus</h3>
<p>El equipo de diseño del laboratorio DogDrones.inc aseguró que sus drones no pueden transmitir virus peligrosos…</p>
<span class="news-tag">#IT</span>
<time datetime="2019-12-22">22 dic 2019</time>
</div>
</article>
<article class="news-block" data-category="HR">
<img src="img/new-research.jpg" alt="Persona mirando un tablero con tarjetas">
<div class="news-block-text">
<h3>Del mundo de la psicología</h3>
<p>Los estudios demuestran que, si haces más, puedes hacer más.</p>
<span class="news-tag">#HR</span>
<time datetime="2019-10-12">12 oct 2019</time>
</div>
</article>
<article class="news-block" data-category="games">
<img src="img/new-drone.jpg" alt="Cuadricóptero">
<div class="news-block-text">
<h3>Un cuadricóptero no es un lujo</h3>
<p>Pilotear un cuadricóptero ayuda a desarrollar la destreza, el razonamiento espacial y la habilidad para trepar a los árboles…</p>
<span class="news-tag">#Juegos</span>
<time datetime="2019-11-21">21 nov 2019</time>
</div>
</article>
<article class="news-block" data-category="IT">
<img src="img/new-loop.jpg" alt="Bucles infinitos">
<div class="news-block-text">
<h3>Bucles infinitos: es hora de parar</h3>
<p>Un grupo de científicos británicos descubrió que el funcionamiento del software depende directamente de si contiene bucles infinitos.</p>
<span class="news-tag">#IT</span>
<time datetime="2019-10-16">16 oct 2019</time>
</div>
</article>
<article class="news-block" data-category="cats">
<img src="img/news-robot2.jpg" alt="Robot de vacaciones">
<div class="news-block-text">
<h3>¡Sorpresa! ¡Escándalo! ¡Sensación!</h3>
<p>¡Resulta que no hace falta ser un gato para empezar a programar en JavaScript!</p>
<span class="news-tag">#Gatos</span>
<time datetime="2019-12-22">22 dic 2019</time>
</div>
</article>
<article class="news-block" data-category="IT">
<img src="img/new-graph.jpg" alt="Computadora portátil con gráficos en la pantalla">
<div class="news-block-text">
<h3>Nueva biblioteca para crear gráficos</h3>
<p>Ahora puedes crear un panel de datos en cuestión de segundos.</p>
<span class="news-tag">#IT</span>
<time datetime="2019-10-14">14 oct 2019</time>
</div>
</article>
<article class="news-block" data-category="cats">
<img src="img/new-cat.jpg" alt="Gato sobre una computadora portátil">
<div class="news-block-text">
<h3>¡SORPRESA! Imágenes secretas de un criadero de gatos</h3>
<p>Nadie se imaginaba que adentro pasara ALGO ASÍ…</p>
<span class="news-tag">#Gatos</span>
<time datetime="2019-10-13">13 oct 2019</time>
</div>
</article>
</section>
</div>
</main>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<a class="footer-logo">
<img src="img/white-logo.svg" alt="Logotipo del portal FlashNews!">
</a>
</div>
</footer>
<button class="up-button" type="button">
↑
<span class="visually-hidden">Volver arriba</span>
</button>
<script src="script.js"></script>
<script src="themes.js"></script>
<script src="up-button.js"></script>
</body>
</html>
html {
scroll-behavior: smooth;
}
.hidden {
display: none;
}
.subscription-link {
position: relative;
padding-top: 8px;
padding-right: 2px;
padding-bottom: 6px;
padding-left: 26px;
margin: auto 4%;
}
.subscription-link::before {
position: absolute;
content: "";
width: 18px;
height: 12px;
top: 9px;
left: 2px;
}
.subscription-link:hover {
padding-bottom: 4px;
border-bottom: 2px solid;
}
.subscription-link:active {
opacity: 0.6;
}
.light-theme .subscription-link {
color: #6653d9;
outline-color: #b6aaff;
}
.light-theme .subscription-link:hover {
border-color: #6653d9;
}
.light-theme .subscription-link::before {
background-image: url("img/letter-light.svg");
}
.dark-theme .subscription-link {
color: #9484f2;
outline-color: #6653d9;
}
.dark-theme .subscription-link:hover {
border-color: #9484f2;
}
.dark-theme .subscription-link::before {
background-image: url("img/letter-dark.svg");
}
.up-button {
position: fixed;
z-index: 1;
padding: 0;
bottom: 75px;
right: 20px;
width: 64px;
height: 64px;
font-size: 36px;
font-weight: bold;
text-align: center;
vertical-align: middle;
border: 5px solid;
border-radius: 50%;
display: none;
cursor: pointer;
}
.light-theme .up-button {
color: #6653d9;
background-color: rgba(255, 255, 255, 0.8);
border-color: #6653d9;
outline-color: #b6aaff;
}
.light-theme .up-button:hover {
color: #473c8d;
background-color: rgba(255, 255, 255, 0.8);
border-color: #473c8d;
}
.dark-theme .up-button {
color: #9484f2;
background-color: rgba(10, 9, 16, 0.6);
border-color: #9484f2;
outline-color: #6653d9;
}
.dark-theme .up-button:hover {
color: #6653d9;
background-color: rgba(10, 9, 16, 0.6);
border-color: #6653d9;
}
.shown {
display: inline-block;
}
/* Estilos de las etiquetas de noticias */
.news-tag {
padding: 4px 8px;
margin: 0 auto 0 0;
border-radius: 12px;
}
.list-tiles-view .news-tag {
margin-bottom: 4px;
}
.light-theme .news-tag {
color: #aaaaaa;
background-color: #f2f2f2;
}
.dark-theme .news-tag {
color: #888888;
background-color: #0a0910;
}
let rowViewButton = document.querySelector('.row-view');
let tileViewButton = document.querySelector('.tile-view');
let newsList = document.querySelector('.news-list');
rowViewButton.onclick = function () {
rowViewButton.classList.add('view-checked');
tileViewButton.classList.remove('view-checked');
newsList.classList.remove('list-tiles-view');
};
tileViewButton.onclick = function () {
rowViewButton.classList.remove('view-checked');
tileViewButton.classList.add('view-checked');
newsList.classList.add('list-tiles-view');
};
let page = document.querySelector('.page');
let themeButton = document.querySelector('.theme-button');
themeButton.onclick = function () {
page.classList.toggle('light-theme');
page.classList.toggle('dark-theme');
};
El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
100%
Consola
- Agrega a la ventana del mininavegador un controlador del evento
onscrollcon la instrucciónwindow.onscroll = function () { };. - Dentro del controlador, muestra en la consola la cadena
'¡Desplazamiento detectado!'. - En el mininavegador, desplaza la página.
- Abre la consola. Observa que el mensaje de desplazamiento apareció muchas veces.