javascript-tutorial · mahdiHash · Jul 18, 2023 · Jul 13, 2023 · Jul 16, 2023
diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md
@@ -1,16 +1,16 @@
-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.
+هسته راه‌حل تابعی است که تاریخ های بیشتر را  هنگامی که در انتهای صفحه هستیم به صفحه اضافه می‌کند (یا در واقعیت بارگذاری اجناس بیشتر).
 
-We can call it immediately and add as a `window.onscroll` handler.
+ما می‌توانیم بلافاصله آن را فراخوانی کنیم و به عنوان هندلر `window.onscroll` اضافه‌اش کنیم.
 
-The most important question is: "How do we detect that the page is scrolled to bottom?"
+مهم‌ترین سوال این است که: "چگونه تشخیص دهیم که صفحه به پایین اسکرول شده است؟"
 
-Let's use window-relative coordinates.
+بیایید از مختصات مربوط به window استفاده کنیم.
 
-The document is represented (and contained) within `<html>` tag, that is `document.documentElement`.
+داکیومنت در تگ `<html>` نمایش داده می‌شود که آن `document.documentElement` است.
 
-We can get window-relative coordinates of the whole document as `document.documentElement.getBoundingClientRect()`, the `bottom` property will be window-relative coordinate of the document bottom.
+ما می‌توانیم مختصات مروبط به window کل داکیومنت را به صورت `()document.documentElement.getBoundingClientRect` دریافت کنیم. ویژگی `bottom`، مختصات مربوط به window document bottom خواهد بود.
 
-For instance, if the height of the whole HTML document is `2000px`, then:
+برای مثال اگر ارتفاع کل داکیومنت `2000px` HTML است سپس:
 
 ```js
 // when we're on the top of the page
@@ -22,7 +22,7 @@ document.documentElement.getBoundingClientRect().top = 0
 document.documentElement.getBoundingClientRect().bottom = 2000
 ```
 
-If we scroll `500px` below, then:
+اگر ما `500px` به پایین اسکرول کنیم سپس:
 
 ```js
 // document top is above the window 500px
@@ -31,8 +31,7 @@ document.documentElement.getBoundingClientRect().top = -500
 document.documentElement.getBoundingClientRect().bottom = 1500
 ```
 
-When we scroll till the end, assuming that the window height is `600px`:
-
+هنگامی که ما تا انتها اسکرول می‌کنیم فرض می‌کنیم ارتفاع `600px` window است:
 
 ```js
 // document top is above the window 1400px
@@ -41,13 +40,13 @@ document.documentElement.getBoundingClientRect().top = -1400
 document.documentElement.getBoundingClientRect().bottom = 600
 ```
 
-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 assumed it to be `600`), we can't scroll it any more up.
+لطفا توجه داشته باشید که `bottom` نمی‌تواند `0` باشد چون هیچوقت به بالای window نمی‌رسد. پایین‌ترین حد مختصات `bottom` ارتفاع window است (ما فرض کردیم `600` است)، ما نمی‌توانیم دیگر بیشتر اسکرول کنیم.
 
-We can obtain the window height as `document.documentElement.clientHeight`.
+ما می‌توانیم ارتفاع window را به صورت `document.documentElement.clientHeight` به دست آوریم.
 
-For our task, we need to know when the document bottom is not no more than `100px` away from it (that is: `600-700px`, if the height is `600`).
+برای تمرین‌مان، ما باید بدانیم تا پایین داکیومنت چه زمانی بیشتر از `100px` فاصله دارد (آن: `600px-700px` است اگر ارتفاع `600` باشد)
 
-So here's the function:
+پس این تابع است:
 
 ```js
 function populate() {

diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/task.md b/2-ui/3-event-details/8-onscroll/1-endless-page/task.md
@@ -2,19 +2,20 @@ importance: 5
 
 ---
 
-# Endless page
+# صفحه بی‌پایان
 
-Create an endless page. When a visitor scrolls it to the end, it auto-appends current date-time to the text (so that a visitor can scroll more).
+یک صفحه بی پایان ایجاد کنید. وقتی یک بیننده به انتهای آن اسکرول می‌کند صفحه به طور خودکار تاریخ فعلی را به طور متنی اضافه می‌کند (پس اینطوری کاربر می‌تواند بیشتر اسکرول کند)
 
-Like this:
+مثل این:
 
 [iframe src="solution" height=200]
 
-Please note two important features of the scroll:
+لطفا به دو ویژگی مهم اسکرول توجه داشته باشید: 
 
-1. **The scroll is "elastic".** We can scroll a little beyond the document start or end in some browsers/devices (empty space below is shown, and then the document will automatically "bounces back" to normal).
-2. **The scroll is imprecise.** When we scroll to page end, then we may be in fact like 0-50px away from the real document bottom.
+1. **اسکرول "قابل ارتجاع" است.** ما می‌توانیم کمی فرانتر از شروع یا پایان داکیومنت، در برخی از مرورگر‌ها و دستگاه‌ها اسکرول کنیم (فضای خالی زیر نشان داده شده است و سپس داکیومنت به طور خودکار به حالت عادی بر می‌گردد.).
 
-So, "scrolling to the end" should mean that the visitor is no more than 100px away from the document end.
+2. **اسکرول دقیق نیست..** هنگامی که به انتهای صفحه اسکرول می‌کنیم ممکن است در حقیقت از document bottom بین 0 تا 50 پیکسل فاصله داشته باشیم.
 
-P.S. In real life we may want to show "more messages" or "more goods".
+پس "اسکرول کردن به انتها" باید به این معنا باشد که بیننده بیش از 100 پیکسل به پایان داکیومنت فاصله ندارد..
+
+در واقعیت ممکن است بخواهیم "پیام‌های بیشتر" یا "کالاهای بیشتر" را نمایش دهیم.
diff --git a/2-ui/3-event-details/8-onscroll/2-updown-button/task.md b/2-ui/3-event-details/8-onscroll/2-updown-button/task.md
@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Up/down button
+# دکمه بالا و پایین
 
-Create a "to the top" button to help with page scrolling.
+یک دکمه "به بالا" برای کمک به اسکرول کردن صفحه بسازید
 
-It should work like this:
-- While the page is not scrolled down at least for the window height -- it's invisible.
-- 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.
-- When the arrow is clicked, the page scrolls to the top.
+باید مانند این کار کند:
+- هنگامی که کاربر به انتهای صفحه نرسیده است مخفی باشد.
+- وقتی صفحه بیشتر از ارتفاع window اسکرول شد علامت فلش "به بالا" در گوشه چپ بالا ظاهر شود. اگر به عقب اسکرول شد آن ناپدید شود.
+- وقتی که بر روی دکمه کلیک شد صفحه به بالا اسکرول شود.
 
-Like this (top-left corner, scroll to see):
+مثل این (گوشه چپ بالا، اسکرول کنید تا ببینید)
 
 [iframe border="1" height="200" link src="solution"]
diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md
@@ -2,29 +2,29 @@ importance: 4
 
 ---
 
-# Load visible images
+# بارگذاری تصاویر قابل‌مشاهده
 
-Let's say we have a slow-speed client and want to save their mobile traffic.
+بیایید فرض کنیم یک کلاینت که سرعت پایینی دارد داریم و می‌خواهیم ترافیک موبایل آن را ذخیره کنیم.
 
-For that purpose we decide not to show images immediately, but rather replace them with placeholders, like this:
+برای این کار ما تصمیم می‌گیریم بلافاصله تصاویر را نمایش ندهیم اما درعوض جای آن را با placeholderها پر کنیم مانند این:
 
 ```html
 <img *!*src="placeholder.svg"*/!* width="128" height="128" *!*data-src="real.jpg"*/!*>
 ```
 
-So, initially all images are `placeholder.svg`. When the page scrolls to the position where the user can see the image -- we change `src` to the one in `data-src`, and so the image loads.
+پس در ابتدا تمام تصاویر `placeholder.svg` هستند. هنگامی که صفحه به موقعیتی کاربر می‌تواند تصویر را ببیند اسکرول شد ما `src` را به آن `data-src` تغییر می‌دهیم و تصویر بارگذاری می‌شود.
 
-Here's an example in `iframe`:
+اینجا در `iframe` یک مثال است:
 
 [iframe src="solution"]
 
-Scroll it to see images load "on-demand".
+اسکرول کنید تا تصویر بارگذاری شود.
 
-Requirements:
-- When the page loads, those images that are on-screen should load immediately, prior to any scrolling.
-- Some images may be regular, without `data-src`. The code should not touch them.
-- Once an image is loaded, it should not reload any more when scrolled in/out.
+الزامات:
+- هنگامی که صفحه بارگذاری می‌شود تصاویری که روی صفحه هستند بدون هیچ اسکرولی بلافاصله باید بارگذاری شوند.
+- برخی تصاویر ممکن است عادی و بدون `data-src` باشند. کد نباید آنها را تحت تاثیر قرار دهد.
+- وقتی تصویری بارگذاری شد نباید با اسکرول مجدد دوباره تصویر بارگذاری شود.
 
-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.S. Only vertical scroll is to be handled, no horizontal scrolling.
+.فقط اسکرول عمودی پیاده شود نه اسکرول افقی
diff --git a/2-ui/3-event-details/8-onscroll/article.md b/2-ui/3-event-details/8-onscroll/article.md
@@ -1,12 +1,12 @@
-# Scrolling
+# اسکرول کردن (Scrolling)
 
-The `scroll` event allows reacting to a page or element scrolling. There are quite a few good things we can do here.
+ایونت `scroll` اجازه می‌دهد به یک صفحه یا المنت واکنش نشان دهید. چندین کار جالب وجود دارد که می‌توانیم انجام دهیم.
 
-For instance:
-- Show/hide additional controls or information depending on where in the document the user is.
-- Load more data when the user scrolls down till the end of the page.
+برای مثال:
+- نمایش دادن یا پنهان کردن کنترل‌ های اضافی یا اطلاعات، با توجه به این که کاربر کجای داکیومنت است.
+- بارگذاری کردن بیشتر داده، هنگامی که کاربر درحال اسکرول به سمت انتهای پیج است.
 
-Here's a small function to show the current scroll:
+اینجا یک تابع کوچک برای نمایش دادن اسکرول فعلی می‌باشد:
 
 ```js autorun
 window.addEventListener('scroll', function() {
@@ -15,23 +15,23 @@ window.addEventListener('scroll', function() {
 ```
 
 ```online
-In action:
+در عمل:
 
-Current scroll = <b id="showScroll">scroll the window</b>
+اسکرول فعلی = <b id="showScroll">اسکرول window</b>
 ```
 
-The `scroll` event works both on the `window` and on scrollable elements.
+ایونت `scroll` در `window` و المنت‌های قابل اسکرول کار می‌کند.
 
-## Prevent scrolling
+## جلوگیری از اسکرول کردن
 
-How do we make something unscrollable?
+چطور می‌توانیم چیزی را غیر قابل اسکرول کنیم؟
 
-We can't prevent scrolling by using `event.preventDefault()` in `onscroll` listener, because it triggers *after* the scroll has already happened.
+ما نمی‌توانیم اسکرول کردن را توسط `()event.preventDefault` در `onscroll` listener جلوگیری کنیم چون *پس* از اسکرولی که قبلا اتفاق افتاده است رخ می‌دهد.
 
-But we can prevent scrolling by `event.preventDefault()` on an event that causes the scroll, for instance `keydown` event for `key:pageUp` and `key:pageDown`.
+اما می‌توانیم توسط `()event.preventDefault` از ایونتی که باعث اسکرول می‌شود جلوگیری کنیم. برای مثال: ایونت `keydown` برای `key:pageUp` و `key:pageDown`
 
-If we add an event handler to these events and `event.preventDefault()` in it, then the scroll won't start.
+اگر ما یک ایونت هندلر به این ایونت‌ها و درون آن `()event.preventDefault` اضافه کنیم، اسکرول شروع نخواهد شد.
 
-There are many ways to initiate a scroll, so it's more reliable to use CSS, `overflow` property.
+راه های زیادی برای شروع کردن یک اسکرول وجود دارد پس استفاده از ویژگی CSS `overflow` خیلی قابل اطمینان‌تر است.
 
-Here are few tasks that you can solve or look through to see applications of `onscroll`.
+اینجا چند تمرین وجود دارد که شما می‌توانید آنها را حل کنید یا نگاهی به اپلیکیشن های `onscroll` بیندازید.