CINXE.COM
<!DOCTYPE html><html lang="tr" data-theme-enabled="1"><head><script>window.currentUser = null;</script><script>window.shopCurrency = "EUR";</script><script>window.localCurrency = "TRY";</script><script>window.countryCode = "tr";</script><script>window.rateShopTo = {"TRY":41.094711407235664,"EUR":1,"USD":1.0874494200088518,"AMD":424.1827578369761};</script><title itemprop="name">Sayfa Kaydırma(Scrolling)</title><link href="/pack/styles.100020a0bc7cf13be729.css" rel="stylesheet"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><!-- chrome autotranslate is enabled only for "en" main version--><meta name="google" content="notranslate"><script>if (window.devicePixelRatio > 1) document.cookie = 'pixelRatio=' + window.devicePixelRatio + ';path=/;expires=Tue, 19 Jan 2038 03:14:07 GMT';</script><link href="//fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic" rel="stylesheet"><link rel="apple-touch-icon-precomposed" href="/img/favicon/apple-touch-icon-precomposed.png"><link rel="canonical" href="https://tr.javascript.info/onscroll"><meta name="msapplication-TileColor" content="#222A2C"><meta name="msapplication-TileImage" content="/img/favicon/tileicon.png"><link rel="icon" href="/img/favicon/favicon.png"><meta itemprop="image" content="https://tr.javascript.info/img/site_preview_en_512x512.png"><meta property="og:title" content="Sayfa Kaydırma(Scrolling)"><meta property="og:image" content="https://tr.javascript.info/img/site_preview_en_1200x630.png"><meta property="og:image:type" content="image/png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="fb:admins" content="100001562528165"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Sayfa Kaydırma(Scrolling)"><meta name="twitter:site" content="@iliakan"><meta name="twitter:creator" content="@iliakan"><meta name="twitter:image" content="https://tr.javascript.info/img/site_preview_en_512x512.png"><meta name="google-adsense-account" content="ca-pub-6204518652652613"><link rel="prev" href="/keyboard-events"><link rel="next" href="/forms-controls"><script data-collect-dnt="true" async src="https://scripts.simpleanalyticscdn.com/latest.js"></script><script>window.GA_ID = "UA-2056213-15";</script><script>window.YANDEX_METRIKA_ID = 32184394;</script><script>{function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-2LWB61WGYJ")}</script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-2LWB61WGYJ"></script><script>window.metrika={reachGoal:function(){}},window.yandex_metrika_callbacks=[function(){try{window.metrika=new Ya.Metrika({id:YANDEX_METRIKA_ID,webvisor:!0,clickmap:!0,params:{user:window.currentUser&&window.currentUser.id}}),metrika.trackLinks({delay:150}),window.addEventListener("error",function(r){window.metrika.reachGoal("JSERROR",{src:(r.filename||r.errorUrl)+": "+(r.lineno||r.errorLine),stack:r.stack||r.error&&r.error.stack,message:r.message})})}catch(r){}}];</script><script src="//mc.yandex.ru/metrika/watch.js" async></script><script>window.RECAPTCHA_ID = "6LfmLAEVAAAAAJMykMnf7aY8nkyTRmYi2ynx51R1";</script><script src="/pack/init.6423bccabee4f56b6ff8.js"></script><script src="/pack/head.fb50118fab5c8ea51243.js" defer></script><meta property="og:title" content="Sayfa Kaydırma(Scrolling)"><meta property="og:type" content="article"><script src="/pack/tutorial.ba5237b93f596f9d03dc.js" defer></script><script src="/pack/footer.59b83436a1264feec8f6.js" defer></script></head><body class="no-icons"><script>window.fontTest();</script><div class="page-wrapper page-wrapper_sidebar_on"><!--[if IE]><div style="color:red;text-align:center">Üzgünüz, Internet Explorer desteklenmemektedi lütfen daha yeni bir tarayıcı kullanın.</div><![endif]--><div class="sitetoolbar sitetoolbar_tutorial"><script>window.langs = [{"code":"ar","name":"Arabic"},{"code":"az","name":"Azerbaijani"},{"code":"bg","name":"Bulgarian"},{"code":"bn","name":"Bengali"},{"code":"bs","name":"Bosnian"},{"code":"ca","name":"Catalan"},{"code":"cs","name":"Czech"},{"code":"da","name":"Danish"},{"code":"de","name":"German"},{"code":"el","name":"Greek"},{"code":"en","name":"English"},{"code":"es","name":"Spanish"},{"code":"fa","name":"Persian (Farsi)"},{"code":"fi","name":"Finnish"},{"code":"fr","name":"French"},{"code":"he","name":"Hebrew"},{"code":"hi","name":"Hindi"},{"code":"hr","name":"Croatian"},{"code":"hu","name":"Hungarian"},{"code":"hy","name":"Armenian"},{"code":"id","name":"Indonesian"},{"code":"it","name":"Italian"},{"code":"ja","name":"Japanese"},{"code":"ka","name":"Georgian"},{"code":"kk","name":"Kazakh"},{"code":"km","name":"Central Khmer"},{"code":"ko","name":"Korean"},{"code":"ku","name":"Kurdish"},{"code":"ky","name":"Kyrgyz"},{"code":"lt","name":"Lithuanian"},{"code":"me","name":"Montenegrin"},{"code":"ml","name":"Malayalam"},{"code":"ms","name":"Malay"},{"code":"my","name":"Burmese"},{"code":"nl","name":"Dutch"},{"code":"no","name":"Norvegian"},{"code":"pa","name":"Punjabi"},{"code":"pl","name":"Polish"},{"code":"pt","name":"Portuguese"},{"code":"ro","name":"Romanian"},{"code":"ru","name":"Russian"},{"code":"si","name":"Sinhala"},{"code":"sk","name":"Slovak"},{"code":"sl","name":"Slovenian"},{"code":"sq","name":"Albanian"},{"code":"sr","name":"Serbian"},{"code":"ta","name":"Tamil"},{"code":"te","name":"Telugu"},{"code":"test","name":"Test"},{"code":"th","name":"Thai"},{"code":"tk","name":"Turkmen"},{"code":"tr","name":"Turkish"},{"code":"ug","name":"Uyghur"},{"code":"uk","name":"Ukrainian"},{"code":"ur","name":"Urdu"},{"code":"uz","name":"Uzbek"},{"code":"v2","name":"v2"},{"code":"vi","name":"Vietnamese"},{"code":"zh-hant","name":"Chinese Traditional"},{"code":"zh","name":"Chinese"}];</script><script>window.lang = "tr";</script><div class="sitetoolbar__content"><div class="sitetoolbar__lang-switcher"><button class="sitetoolbar__dropdown-button" data-dropdown-toggler>TR</button><div class="sitetoolbar__dropdown-wrap"><div class="sitetoolbar__dropdown-body"><div class="sitetoolbar__lang-switcher-body"><div class="supported-langs supported-langs_toolbar"><div class="supported-langs__container"><ul class="supported-langs__list" style="height:200px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://ar.javascript.info/"><span class="supported-langs__brief">AR</span><span class="supported-langs__title">عربي</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://javascript.info/onscroll"><span class="supported-langs__brief">EN</span><span class="supported-langs__title">English</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://es.javascript.info/onscroll"><span class="supported-langs__brief">ES</span><span class="supported-langs__title">Español</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://fa.javascript.info/onscroll"><span class="supported-langs__brief">FA</span><span class="supported-langs__title">فارسی</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://fr.javascript.info/onscroll"><span class="supported-langs__brief">FR</span><span class="supported-langs__title">Français</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://id.javascript.info/"><span class="supported-langs__brief">ID</span><span class="supported-langs__title">Indonesia</span></a></li></ul><ul class="supported-langs__list" style="height:200px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://it.javascript.info/onscroll"><span class="supported-langs__brief">IT</span><span class="supported-langs__title">Italiano</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://ja.javascript.info/onscroll"><span class="supported-langs__brief">JA</span><span class="supported-langs__title">日本語</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://ko.javascript.info/"><span class="supported-langs__brief">KO</span><span class="supported-langs__title">한국어</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://learn.javascript.ru/onscroll"><span class="supported-langs__brief">RU</span><span class="supported-langs__title">Русский</span></a></li><li class="supported-langs__item supported-langs__item_current"><a class="supported-langs__link" href="https://tr.javascript.info/onscroll"><span class="supported-langs__brief">TR</span><span class="supported-langs__title">Türkçe</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://uk.javascript.info/onscroll"><span class="supported-langs__brief">UK</span><span class="supported-langs__title">Українська</span></a></li></ul><ul class="supported-langs__list" style="height:20px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://zh.javascript.info/onscroll"><span class="supported-langs__brief">ZH</span><span class="supported-langs__title">简体中文</span></a></li></ul></div><div class="supported-langs__text"><p>Bu açık-kaynaklı projenin tüm dünyada kullanılabilir olmasını istiyoruz.</p> <p>Kendi dilinizde çeviriye <a href="https://javascript.info/translate">yardım edebilirsiniz</a>!</p> </div></div></div></div></div></div><div class="sitetoolbar__logo-wrap"><a class="sitetoolbar__link sitetoolbar__link_logo" href="/"><img class="sitetoolbar__logo sitetoolbar__logo_normal" src="/img/sitetoolbar__logo_en.svg" width="200" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_normal sitetoolbar__logo_dark" src="/img/sitetoolbar__logo_en-white.svg" width="200" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_small" src="/img/sitetoolbar__logo_small_en.svg" width="70" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_small sitetoolbar__logo_dark" src="/img/sitetoolbar__logo_small_en-white.svg" width="70" alt="" role="presentation"/><script>Array.prototype.forEach.call(document.querySelectorAll("img.sitetoolbar__logo"),function(e){let t=document.createElement("object");t.type="image/svg+xml",t.className=e.className,t.style.cssText="left:0;top:0;position:absolute",t.onload=function(){t.onload=null,e.style.visibility="hidden"},t.data=e.src,e.parentNode.insertBefore(t,e)});</script></a></div><div class="sitetoolbar__nav-toggle-wrap"><button class="sitetoolbar__nav-toggle" type="button"></button></div><nav class="sitetoolbar__sections"><ul class="sitetoolbar__sections-list"></ul></nav><div class="sitetoolbar__right-button-wrap"><a class="sitetoolbar-right-button sitetoolbar-right-button_courses" href="/ebook"><span class="sitetoolbar-right-button__extra-text">Satın al</span>EPUB/PDF</a></div><div class="sitetoolbar__theme-switcher"><div class="theme-changer"><label class="theme-changer__label" for="theme-changer-input" data-tooltip="Change theme"><input class="theme-changer__input" type="checkbox" id="theme-changer-input" data-theme-changer="data-theme-changer"/><span class="theme-changer__icon theme-changer__icon_light-theme"></span><span class="theme-changer__icon theme-changer__icon_dark-theme"></span></label></div></div><div class="sitetoolbar__search-wrap"><div class="sitetoolbar__search-content"><button class="sitetoolbar__search-toggle" type="button"></button><form class="sitetoolbar__search" method="GET" action="/search"><div class="sitetoolbar__search-input"><div class="text-input"><input class="text-input__control" name="query" placeholder="Javascript.info'da ara" required="required" type="text"/></div><button class="sitetoolbar__find" type="submit">Ara</button></div></form></div></div></div><div class="tablet-menu"><div class="tablet-menu__line"><div class="tablet-menu__content"><form class="tablet-menu-search" action="/search/"><input class="tablet-menu-search__input" type="search" name="query" placeholder="Eğitimde ara" required="required"/><button class="tablet-menu-search__button" type="submit" name="type" value="articles">Ara</button></form></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><a class="map" href="/tutorial/map" data-action="tutorial-map"><span class="map__text">Eğitim haritası</span></a></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><div class="theme-changer theme-changer_tablet-menu theme-changer_has-label"><label class="theme-changer__label" for="theme-changer-input-tablet" data-tooltip="Change theme"><input class="theme-changer__input" type="checkbox" id="theme-changer-input-tablet" data-theme-changer="data-theme-changer"/><span class="theme-changer__icon theme-changer__icon_light-theme"></span><span class="theme-changer__icon theme-changer__icon_dark-theme"></span><span class="theme-changer__label-text theme-changer__label-text_light-theme">Light theme</span><span class="theme-changer__label-text theme-changer__label-text_dark-theme">Dark theme</span></label></div></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><div class="share-icons"><span class="share-icons__title">Paylaş</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Ftr.javascript.info%2Fonscroll" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Ftr.javascript.info%2Fonscroll" rel="nofollow"></a></div></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><select class="tablet-menu__nav input-select input-select input-select_small" onchange="if(this.value) window.location.href=this.value"><option value="https://ar.javascript.info/">عربي</option><option value="https://javascript.info/onscroll">English</option><option value="https://es.javascript.info/onscroll">Español</option><option value="https://fa.javascript.info/onscroll">فارسی</option><option value="https://fr.javascript.info/onscroll">Français</option><option value="https://id.javascript.info/">Indonesia</option><option value="https://it.javascript.info/onscroll">Italiano</option><option value="https://ja.javascript.info/onscroll">日本語</option><option value="https://ko.javascript.info/">한국어</option><option value="https://learn.javascript.ru/onscroll">Русский</option><option value="https://tr.javascript.info/onscroll" selected>Türkçe</option><option value="https://uk.javascript.info/onscroll">Українська</option><option value="https://zh.javascript.info/onscroll">简体中文</option></select></div></div></div><progress class="tutorial-progress" data-sticky value="21" max="30" data-tooltip="30'in 21'i dersi"></progress></div><div class="page page_sidebar_on page_inner_padding"><script>if(localStorage.noSidebar){document.querySelector(".page").classList.remove("page_sidebar_on");let e=document.querySelector(".page-wrapper");e&&e.classList.remove("page-wrapper_sidebar_on")}setTimeout(function(){document.querySelector(".page").classList.add("page_sidebar-animation-on")});</script><div class="page__inner"><main class="main main_width-limit"><header class="main__header"><div class="main__header-inner"><div class="main__header-group"><ol class="breadcrumbs"><li class="breadcrumbs__item breadcrumbs__item_home"><a class="breadcrumbs__link" href="/"><span class="breadcrumbs__hidden-text">Eğitim</span></a></li><li class="breadcrumbs__item" id="breadcrumb-1"><a class="breadcrumbs__link" href="/ui"><span>Browser: Document, Events, Interfaces</span></a></li><li class="breadcrumbs__item" id="breadcrumb-2"><a class="breadcrumbs__link" href="/event-details"><span>UI Events</span></a></li><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Eğitim","item":"https://tr.javascript.info/"},{"@type":"ListItem","position":2,"name":"Browser: Document, Events, Interfaces","item":"https://tr.javascript.info/ui"},{"@type":"ListItem","position":3,"name":"UI Events","item":"https://tr.javascript.info/event-details"}]}</script></ol><div class="updated-at" data-tooltip="Son güncelleme 9 Mayıs 2023"><div class="updated-at__content">9 Mayıs 2023</div></div></div><h1 class="main__header-title">Sayfa Kaydırma(Scrolling)</h1></div></header><div class="content"><article class="formatted" itemscope itemtype="http://schema.org/TechArticle"><meta itemprop="name" content="Sayfa Kaydırma(Scrolling)"><div itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="email" content="iliakan@gmail.com"><meta itemprop="name" content="Ilya Kantor"></div><div itemprop="articleBody"><p>Kaydırma olayları, bir sayfada veya öğe kaydırmada tepki vermeyi sağlar. Burada yapabileceğimiz epeyce iyi şeyler var.</p> <p>Örneğin:</p> <ul> <li>Kullanıcının belgede nerede olduğuna bağlı olarak ek kontrolleri veya bilgileri gösterin / gizleyin…</li> <li>Kullanıcı sayfanın sonuna kadar aşağı kaydırdığında daha fazla veri yükleyin.</li> </ul> <p>Küçük bir kaydırma örneği:</p> <div id="6y8c4x7hgy" data-trusted="1" class="code-example" data-autorun="true"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>window.addEventListener('scroll', function() { document.getElementById('showScroll').innerHTML = pageYOffset + 'px'; });</code></pre> </div> </div> </div><p>İşlemde:</p> <p>Mevcut kaydırma = <b id="showScroll">scroll the window</b></p> <p><code>scroll</code> elementi hem <code>window</code> ta hem de kaydırılabilir elementlerde çalışır.</p> <h2><a class="main__anchor" name="kaydrmay-nlemek" href="#kaydrmay-nlemek">Kaydırmayı Önlemek</a></h2><p>Bir şeyi nasıl kaydırılamaz hale getiririz? <code>onscroll</code> dinleyicisinde <code>event.preventDefault()</code> kullanarak kaydırmayı engelleyemiyoruz çünkü kaydırma zaten gerçekleştikten sonra tetiklenir.</p> <p>Ancak <code>event.preventDefault()</code> ile , kaydırmaya neden olan bir olayda kaydırmayı engelleyebiliriz .</p> <p>Örneğin:</p> <ul> <li><code>wheel</code> olayı – farenin tekerliği ile veya “kayan bir dokunmatik alan” yani touchpad de aynı görevi üstlenir).</li> <li><code>keydown</code> olayı için <kbd class="shortcut">pageUp</kbd> ve <kbd class="shortcut">pageDown</kbd>.</li> </ul> <p>Bu olaylara bir olay işleyicisi (event handler) ve bunun içine <code>event.preventDefault()</code> eklersek, kaydırma başlamaz.</p> <p>Bazen bu size yardımcı olabilir ancak bir şeyi kaydırılamaz hale getirmek için CSS kullanmak daha güvenilirdir mesela <code>overflow</code> özelliği gibi.</p> <p>İşte <code>onscroll</code> ile çözebileceğiniz veya uygulamaları görmek için inceleyebileceğiniz birkaç görev.</p> </div></article><div class="tasks formatted"><h2 class="tasks__title" id="tasks"><a class="tasks__title-anchor main__anchor main__anchor main__anchor_noicon" href="#tasks">Görevler</a></h2><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#sonsuz-sayfa" name="sonsuz-sayfa">Sonsuz sayfa</a></h3><a class="task__open-link" href="/task/endless-page" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="Görevin önemi 1'den 5'e kadar hangisidir.">önem: 5</span></div><div class="task__content"><div class="task__formatted"><p>Sonsuz bir sayfa oluşturun. Ziyaretçi sayfayı sonuna kadar kaydırdığında metnin sonuna otomatik olarak güncel tarih-saat eklenir (böylece ziyaretçi daha fazla kaydırabilir).</p> <p>Örnekteki gibi:</p> <div class="code-result"> <div class="code-result__toolbar toolbar"></div> <iframe class="code-result__iframe" data-trusted="1" style="height:200px" src="https://tr.js.cx/task/endless-page/solution/"></iframe> </div><p>Lütfen kaydırmanın iki önemli özelliğine dikkat edin:</p> <ol> <li><strong>Kaydırma “esnektir”.</strong> Bazı tarayıcılarda / cihazlarda sayfa başlangıcından veya sonundan biraz öteye kaydırabiliriz (altında boşluk görüntülenir ardından otomatik olarak normale “geri döner”).</li> <li><strong>Kaydırma “belirsizdir”.</strong> Sayfa sonuna kaydırdığımızda gerçek sayfanın altından 0-50 piksel kadar uzakta olabiliriz.</li> </ol> <p>Dolayısıyla “sonuna kadar kaydırma” ifadesi, ziyaretçinin sayfa sonuna en fazla 100 piksel uzakta olduğu anlamına gelmelidir.</p> <p>Not: Gerçek hayatta “daha fazla mesaj” veya “daha fazla ürün” göstermek isteyebiliriz.</p> <p><a href="https://plnkr.co/edit/rHeZ6ScDCmexugdj?p=preview" target="_blank" data-plunk-id="rHeZ6ScDCmexugdj">Görevler için korunaklı alan aç.</a></p></div><button class="task__solution" type="button">çözüm</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><p>The core of the solution is a function that adds more dates to the page (or loads more stuff in real-life) while we’re at the page end.</p> <p>We can call it immediately and add as a <code>window.onscroll</code> handler.</p> <p>The most important question is: “How do we detect that the page is scrolled to bottom?”</p> <p>Let’s use window-relative coordinates.</p> <p>The document is represented (and contained) within <code><html></code> tag, that is <code>document.documentElement</code>.</p> <p>We can get window-relative coordinates of the whole document as <code>document.documentElement.getBoundingClientRect()</code>. And the <code>bottom</code> property will be window-relative coordinate of the document end.</p> <p>For instance, if the height of the whole HTML document is 2000px, then:</p> <div id="qcg0o8lrob" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// When we're on the top of the page // window-relative top = 0 document.documentElement.getBoundingClientRect().top = 0 // window-relative bottom = 2000 // the document is long, so that is probably far beyond the window bottom document.documentElement.getBoundingClientRect().bottom = 2000</code></pre> </div> </div> </div><p>If we scroll <code>500px</code> below, then:</p> <div id="vchwywscos" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// document top is above the window 500px document.documentElement.getBoundingClientRect().top = -500 // document bottom is 500px closer document.documentElement.getBoundingClientRect().bottom = 1500</code></pre> </div> </div> </div><p>When we scroll till the end, assuming that the window height is <code>600px</code>:</p> <div id="1frq5sroge" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// document top is above the window 1400px document.documentElement.getBoundingClientRect().top = -1400 // document bottom is below the window 600px document.documentElement.getBoundingClientRect().bottom = 600</code></pre> </div> </div> </div><p>Please note that the bottom can’t be 0, because it never reaches the window top. The lowest limit of the bottom coordinate is the window height, we can’t scroll it any more up.</p> <p>And the window height is <code>document.documentElement.clientHeight</code>.</p> <p>We want the document bottom be no more than <code>100px</code> away from it.</p> <p>So here’s the function:</p> <div id="4av0bmyuw1" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function populate() { while(true) { // document bottom let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom; // if it's greater than window height + 100px, then we're not at the page back // (see examples above, big bottom means we need to scroll more) if (windowRelativeBottom > document.documentElement.clientHeight + 100) break; // otherwise let's add more data document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`); } }</code></pre> </div> </div> </div><p><a href="https://plnkr.co/edit/kfr46KrRWFGoKn0g?p=preview" target="_blank" data-plunk-id="kfr46KrRWFGoKn0g">Çözümü korunaklı alanda aç.</a></p></div></div><button class="close-button task__answer-close" type="button" title="kapat"></button></div></div></div></div><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#up-down-button" name="up-down-button">Up/down button</a></h3><a class="task__open-link" href="/task/updown-button" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="Görevin önemi 1'den 5'e kadar hangisidir.">önem: 5</span></div><div class="task__content"><div class="task__formatted"><p>Create a “to the top” button to help with page scrolling.</p> <p>It should work like this:</p> <ul> <li>While the page is not scrolled down at least for the window height – it’s invisible.</li> <li>When the page is scrolled down more than the window height – there appears an “upwards” arrow in the left-top corner. If the page is scrolled back, it disappears.</li> <li>When the arrow is clicked, the page scrolls to the top.</li> </ul> <p>Like this:</p> <div class="code-result"> <div class="code-result__toolbar toolbar"><div class="toolbar__tool"> <a href="https://tr.js.cx/task/updown-button/solution/" target="_blank" title="yeni pencerede aç" class="toolbar__button toolbar__button_external"></a> </div> </div> <iframe class="code-result__iframe" data-trusted="1" style="height:200px" src="https://tr.js.cx/task/updown-button/solution/"></iframe> </div><p><a href="https://plnkr.co/edit/Fc9tctusu0zP0CLh?p=preview" target="_blank" data-plunk-id="Fc9tctusu0zP0CLh">Görevler için korunaklı alan aç.</a></p></div><button class="task__solution" type="button">çözüm</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><p><a href="https://plnkr.co/edit/dboFLv4LsbPIhNkx?p=preview" target="_blank" data-plunk-id="dboFLv4LsbPIhNkx">Çözümü korunaklı alanda aç.</a></p></div></div><button class="close-button task__answer-close" type="button" title="kapat"></button></div></div></div></div><div class="task tasks__task"><div class="task__header"><div class="task__title-wrap"><h3 class="task__title"><a class="main__anchor" href="#load-visible-images" name="load-visible-images">Load visible images</a></h3><a class="task__open-link" href="/task/load-visible-img" target="_blank"></a></div><div class="task__header-note"><span class="task__importance" title="Görevin önemi 1'den 5'e kadar hangisidir.">önem: 4</span></div><div class="task__content"><div class="task__formatted"><p>Let’s say we have a slow-speed client and want to save their mobile traffic.</p> <p>For that purpose we decide not to show images immediately, but rather replace them with placeholders, like this:</p> <div id="rko4z75ges" data-trusted="1" class="code-example" data-highlight="[{"start":0,"cols":[{"start":5,"end":26},{"start":52,"end":71}]}]"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-markup"><code><img src="placeholder.svg" width="128" height="128" data-src="real.jpg"></code></pre> </div> </div> </div><p>So, initially all images are <code>placeholder.svg</code>. When the page scrolls to the position where the user can see the image – we change <code>src</code> to the one in <code>data-src</code>, and so the image loads.</p> <p>Here’s an example in <code>iframe</code>:</p> <div class="code-result"> <div class="code-result__toolbar toolbar"></div> <iframe class="code-result__iframe" data-trusted="1" style="height:300px" src="https://tr.js.cx/task/load-visible-img/solution/"></iframe> </div><p>Scroll it to see images load “on-demand”.</p> <p>Requirements:</p> <ul> <li>When the page loads, those images that are on-screen should load immediately, prior to any scrolling.</li> <li>Some images may be regular, without <code>data-src</code>. The code should not touch them.</li> <li>Once an image is loaded, it should not reload any more when scrolled in/out.</li> </ul> <p>P.S. If you can, make a more advanced solution that would “preload” images that are one page below/after the current position.</p> <p>P.P.S. Only vertical scroll is to be handled, no horizontal scrolling.</p> <p><a href="https://plnkr.co/edit/XDR0BoXZpFHeAzic?p=preview" target="_blank" data-plunk-id="XDR0BoXZpFHeAzic">Görevler için korunaklı alan aç.</a></p></div><button class="task__solution" type="button">çözüm</button><div class="task__answer"><div class="task__answer-content"><div class="formatted"><p>The <code>onscroll</code> handler should check which images are visible and show them.</p> <p>We also may want to run it when the page loads, to detect immediately visible images prior to any scrolling and load them.</p> <p>If we put it at the <code><body></code> bottom, then it runs when the page content is loaded.</p> <div id="4v3sjt6ig6" data-trusted="1" class="code-example" data-highlight="[{"start":15,"end":16}]"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// ...the page content is above... function isVisible(elem) { let coords = elem.getBoundingClientRect(); let windowHeight = document.documentElement.clientHeight; // top elem edge is visible OR bottom elem edge is visible let topVisible = coords.top > 0 && coords.top < windowHeight; let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0; return topVisible || bottomVisible; } showVisible(); window.onscroll = showVisible;</code></pre> </div> </div> </div><p>For visible images we can take <code>img.dataset.src</code> and assign it to <code>img.src</code> (if not did it yet).</p> <p>P.S. The solution also has a variant of <code>isVisible</code> that “pre-loads” images that are within 1 page above/below (the page height is <code>document.documentElement.clientHeight</code>).</p> <p><a href="https://plnkr.co/edit/Jfqhiflf0tSzDXS9?p=preview" target="_blank" data-plunk-id="Jfqhiflf0tSzDXS9">Çözümü korunaklı alanda aç.</a></p></div></div><button class="close-button task__answer-close" type="button" title="kapat"></button></div></div></div></div></div></div><div class="page__nav-wrap"><a class="page__nav page__nav_prev" href="/keyboard-events" data-tooltip="Keyboard: keydown and keyup"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">Önceki ders</span></a><a class="page__nav page__nav_next" href="/forms-controls" data-tooltip="Forms, controls"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">Bir sonraki ders</span></a></div><div class="article-tablet-foot tablet-only"><div class="article-tablet-foot__layout"><div class="share-icons"><span class="share-icons__title">Paylaş</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Ftr.javascript.info%2Fonscroll" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Ftr.javascript.info%2Fonscroll" rel="nofollow"></a></div><div class="article-tablet-foot__map"><a class="map" href="/tutorial/map" data-action="tutorial-map"><span class="map__text">Eğitim haritası</span></a></div></div></div><div class="comments formatted" id="comments"><div class="comments__header"><h2 class="comments__header-title"><a href="#comments" name="comments">Yorumlar</a></h2><div class="comments__read-before"><span class="comments__read-before-link">yorum yapmadan önce lütfen okuyun...</span><div class="comments__read-before-popup"><div class="comments__read-before-popup-i"><ul><li>Eğer geliştirme ile alakalı bir öneriniz var ise yorum yerine <a href="https://github.com/javascript-tutorial/en.javascript.info/issues/new">github konusu gönderiniz</a>.</li><li>Eğer makalede bir yeri anlamadıysanız lütfen belirtiniz.</li><li>Koda birkaç satır eklemek için <code><code></code> kullanınız, birkaç satır eklemek için ise <code><pre></code> kullanın. Eğer 10 satırdan fazla kod ekleyecekseniz <a href='https://plnkr.co/edit/?p=preview'>plnkr</a> kullanabilirsiniz)</li></ul></div></div></div></div><div id="disqus_thread"></div><script>var disqus_config = function() { if (!this.page) this.page = {}; Object.assign(this.page, {"url":"https:\/\/tr.javascript.info\/onscroll","identifier":"\/onscroll"}); };</script><script>var disqus_shortname = "tr-javascript-info";</script><script>var disqus_enabled = true;</script></div></script></main></div><div class="sidebar page__sidebar sidebar sidebar_sticky-footer"><button class="sidebar__toggle" data-sidebar-toggle></button><a class="map" href="/tutorial/map" data-action="tutorial-map" data-tooltip="Eğitim haritası"></a><div class="sidebar__inner"><div class="sidebar__content"><div class="sidebar__section"><h4 class="sidebar__section-title">Bölüm</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="/event-details">UI Events</a></li></ul></nav></div><div class="sidebar__section"><h4 class="sidebar__section-title">Ders menüsü</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#kaydrmay-nlemek">Kaydırmayı Önlemek</a></li></ul></nav></div><div class="sidebar__section"><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#tasks">Görevler (3)</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#comments">Yorumlar</a></li></ul></nav></div><div class="sidebar__section"><div class="sidebar__section-title">Paylaş</div><a class="share share_tw sidebar__share" href="https://twitter.com/share?url=https%3A%2F%2Ftr.javascript.info%2Fonscroll" rel="nofollow"></a><a class="share share_fb sidebar__share" href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=https%3A%2F%2Ftr.javascript.info%2Fonscroll" rel="nofollow"></a></div><div class="sidebar__section"><a class="sidebar__link" href="https://github.com/javascript-tutorial/tr.javascript.info/blob/master/2-ui/3-event-details/8-onscroll" rel="nofollow">GitHub'da düzenle</a></div></div></div></div></div></div><div class="page-footer"><ul class="page-footer__list"><li class="page-footer__item page-footer__item_copy">© 2007—2025 Ilya Kantor</li><li class="page-footer__item page-footer__item_about"><a class="page-footer__link" href="/about">proje hakkında</a></li><li class="page-footer__item page-footer__item_contact"><a class="page-footer__link" href="/about#contact-us">iletişime geçin</a></li></ul></div></body></html>