{"id":28803,"date":"2024-04-01T05:07:43","date_gmt":"2024-04-01T04:07:43","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/domina-el-scroll-en-javascript-tecnicas-para-efectos-y-carga-perezosa\/"},"modified":"2024-06-03T17:42:37","modified_gmt":"2024-06-03T16:42:37","slug":"domina-el-scroll-en-javascript-tecnicas-para-efectos-y-carga-perezosa","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/master-scrolling-in-javascript-techniques-for-effects-and-lazy-loading\/","title":{"rendered":"Master Scrolling in JavaScript: Techniques for Effects and Lazy Loading"},"content":{"rendered":"<p>Managing scrolling on a web page can completely transform the user experience. From attention-grabbing visuals to performance optimizations like lazy loading, JavaScript gives us the tools needed to create dynamic and efficient interactions. Below, we&#039;ll explore the most effective techniques and how you can implement them in your projects.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-scrolling-in-javascript-techniques-for-effects-and-lazy-loading\/#%C2%BFPor_que_es_importante_manejar_el_scroll_en_JavaScript\" >Why is it important to handle scrolling in JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-scrolling-in-javascript-techniques-for-effects-and-lazy-loading\/#Tecnicas_de_deteccion_de_eventos_de_scroll\" >Scroll event detection techniques<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-scrolling-in-javascript-techniques-for-effects-and-lazy-loading\/#Debouncing_y_Throttling\" >Debouncing and Throttling<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-scrolling-in-javascript-techniques-for-effects-and-lazy-loading\/#Implementacion_de_efectos_visuales_basados_en_el_scroll\" >Implementation of scroll-based visual effects<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-scrolling-in-javascript-techniques-for-effects-and-lazy-loading\/#Parallax_simple_con_JavaScript\" >Simple parallax with JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-scrolling-in-javascript-techniques-for-effects-and-lazy-loading\/#Animacion_Fade-in_al_desplazar\" >Fade-in animation on scroll<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-scrolling-in-javascript-techniques-for-effects-and-lazy-loading\/#Carga_Perezosa_Lazy_Loading\" >Lazy Loading<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-scrolling-in-javascript-techniques-for-effects-and-lazy-loading\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFPor_que_es_importante_manejar_el_scroll_en_JavaScript\"><\/span>Why is it important to handle scrolling in JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before we dive into the code, it&#039;s crucial to understand the impact of scroll handling. Scroll navigation directly influences how users interact with content. Good handling can mean a page that feels fast and lively, while poor handling can lead to a frustrating and slow user experience.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tecnicas_de_deteccion_de_eventos_de_scroll\"><\/span>Scroll event detection techniques<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To get started with scrolling in JavaScript, you need to know how to detect and respond to scroll events. We use the event <code>scroll<\/code> of the object <code>window<\/code> to run functions every time the user scrolls the page.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">window.addEventListener(&#039;scroll&#039;, function() { console.log(&#039;User is scrolling&#039;); });<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Debouncing_y_Throttling\"><\/span>Debouncing and Throttling<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The scroll event can fire hundreds of times per second, which can be detrimental to performance if not handled properly. This is where techniques like <strong>debouncing<\/strong> y <strong>throttling<\/strong>:<\/p>\n<ul>\n<li><strong>Throttling<\/strong> limits the frequency with which a function can be executed.<\/li>\n<li><strong>Debouncing<\/strong> groups a series of sequential calls into a single one, which is executed after the event has stopped issuing for a specified period.<\/li>\n<\/ul>\n<p>Both approaches help reduce the load on the browser, ensuring a smoother experience.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">lettimer; window.addEventListener(&#039;scroll&#039;, () =&gt; { clearTimeout(timer); timer = setTimeout(() =&gt; { console.log(&#039;Scroll Event Handler executed&#039;); }, 200); });<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Implementacion_de_efectos_visuales_basados_en_el_scroll\"><\/span>Implementation of scroll-based visual effects<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Visual effects can range from simple animations to complex interactions based on scroll position. Here two popular techniques:<\/p>\n<ol>\n<li><strong>Parallax Scrolling<\/strong>: Creates a three-dimensional effect where the background of the page moves at a different speed than the content.<\/li>\n<li><strong>Fade-in Elements<\/strong>: Elements are displayed smoothly as the user scrolls down the page.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Parallax_simple_con_JavaScript\"><\/span>Simple parallax with JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For basic parallax, we can adjust the style <code>backgroundPosition<\/code> of an element based on the scroll event.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">window.addEventListener(&#039;scroll&#039;, function() { const background = document.getElementById(&#039;parallaxFondo&#039;); background.style.backgroundPositionY = -(window.pageYOffset \/ 2) + &#039;px&#039;; });<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Animacion_Fade-in_al_desplazar\"><\/span>Fade-in animation on scroll<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Using CSS along with JavaScript, you can make elements fade out entering the viewport:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">window.addEventListener(&#039;scroll&#039;, fadeIn); function fadeIn() { const elements = document.querySelectorAll(&#039;.fade-in&#039;); for (let i = 0; i &lt; elements.length; i++) { let element = elements[i]; let position = element.getBoundingClientRect(); \/\/ Checking if the element is in the viewport if (position.top &lt; window.innerHeight &amp;&amp; position.bottom &gt;= 0) { element.style.opacity = 1; element.style.transform = &#039;translateY(0)&#039;; } else { element.style.opacity = 0; element.style.transform = &#039;translateY(50px)&#039;; } } }<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Carga_Perezosa_Lazy_Loading\"><\/span>Lazy Loading<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Loading images, videos, or other resources only when they are needed not only improves the initial page loading speed but also saves bandwidth. This is especially useful on websites with a large amount of images or multimedia content.<\/p>\n<p>The easiest way to implement lazy loading is to use the Intersection Observer API, which provides an efficient way to detect when an element enters the viewport.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let observer = new IntersectionObserver((entries, observer) =&gt; { entries.forEach(entry =&gt; { if (entry.isIntersecting) { let img = entry.target; img.src = img.dataset.src; observer.unobserve( img); } }); }, {rootMargin: &quot;0px 0px 50px 0px&quot;}); document.querySelectorAll(&#039;img.lazy&#039;).forEach(img =&gt; { observer.observe(img); });<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Mastering scroll management techniques in JavaScript opens up a world of possibilities for improving user interaction and web page performance. Whether you want to implement stunning visual effects or improve the loading of your resources with lazy loading, JavaScript and its scroll events are powerful tools in your development arsenal.<\/p>\n<p>If you have questions about how to implement these techniques in your project, feel free to visit <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">NelkoDev Contact<\/a>. I&#039;m here to help you take your web development skills to the next level.<\/p>","protected":false},"excerpt":{"rendered":"<p>Managing scrolling on a web page can completely transform the user experience. From attention-grabbing visual effects to performance optimizations like lazy loading, JavaScript gives us the tools we need to create dynamic and efficient interactions. Below, we&#039;ll explore the most effective techniques and how you can implement them in your [\u2026]<\/p>","protected":false},"author":1,"featured_media":28804,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1939],"tags":[205,1332,1473,555,2205,185,60,1948,1008,1005,61],"class_list":["post-28803","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-pruebas-de-frontend","tag-blog","tag-carga","tag-domina","tag-efectos","tag-frontend","tag-javascript","tag-para","tag-perezosa","tag-pruebas","tag-scroll","tag-tecnicas"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28803"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28803\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28804"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}