You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
How do we find the width and height of the browser window? How do we get the full width and height of the document, including the scrolled out part? How do we scroll the page using JavaScript?
3
+
كيف نجد عرض وارتفاع نافذة المتصفح؟ كيف نحصل على العرض والارتفاع الكاملين للوثيقة ، بما في ذلك الجزء المسحوب؟ كيف ننتقل الصفحة باستخدام جافا سكريبت؟
4
4
5
-
For most such requests, we can use the root document element `document.documentElement`, that corresponds to the `<html>` tag. But there are additional methods and peculiarities important enough to consider.
5
+
بالنسبة لمعظم هذه الطلبات ، يمكننا استخدام عنصر المستند الجذر `document.documentElement` ، الذي يتوافق مع العلامة`<html>`. ولكن هناك طرق وخصائص إضافية مهمة بما يكفي للنظر فيها.
6
6
7
-
## Width/height of the window
7
+
## عرض / ارتفاع النافذة
8
8
9
-
To get window width and height we can use `clientWidth/clientHeight`of `document.documentElement`:
9
+
للحصول على عرض النافذة وارتفاعها ، يمكننا استخدام `clientWidth / clientHeight`من`document.documentElement`:
10
10
11
11
12
12
13
13
```online
14
-
For instance, this button shows the height of your window:
Browsers also support properties`window.innerWidth/innerHeight`. They look like what we want. So why not to use them instead?
19
+
````warn header="ليس`window.innerWidth / Height`"
20
+
كما تدعم المستعرضات الخصائص`window.innerWidth / innerHeight`. يبدون مثل ما نريد. فلماذا لا تستخدمها بدلاً من ذلك؟
21
21
22
-
If there exists a scrollbar, and it occupies some space, `clientWidth/clientHeight`provide the width/height without it (subtract it). In other words, they return width/height of the visible part of the document, available for the content.
22
+
إذا كان هناك شريط تمرير ، ويحتل بعض المساحة ، يوفر `clientWidth / clientHeight`العرض / الارتفاع بدونه (اطرحه). بمعنى آخر ، تقوم بإرجاع عرض / ارتفاع الجزء المرئي من المستند المتاح للمحتوى.
23
23
24
-
...And `window.innerWidth/innerHeight`include the scrollbar.
24
+
... و `window.innerWidth / innerHeight`تتضمن شريط التمرير.
25
25
26
-
If there's a scrollbar, and it occupies some space, then these two lines show different values:
26
+
إذا كان هناك شريط تمرير ، ويشغل بعض المساحة ، فإن هذين الخطين يعرضان قيمًا مختلفة:
27
27
```js run
28
28
alert( window.innerWidth ); // full window width
29
29
alert( document.documentElement.clientWidth ); // window width minus the scrollbar
30
30
```
31
31
32
-
In most cases we need the *available* window width: to draw or position something. That is: inside scrollbars if there are any. So we should use`documentElement.clientHeight/Width`.
33
-
````
32
+
في معظم الحالات ، نحتاج إلى عرض النافذة * المتوفرة *: لرسم شيء ما أو وضعه. هذا هو: داخل أشرطة التمرير إذا كان هناك أي. لذا يجب علينا استخدام`documentElement.clientHeight / Width`.
33
+
````
34
34
35
-
```warn header="`DOCTYPE` is important"
36
-
Please note: top-level geometry properties may work a little bit differently when there's no `<!DOCTYPE HTML>` in HTML. Odd things are possible.
35
+
```warn header =" "DOCTYPE`مهم"
36
+
يرجى ملاحظة: قد تعمل خصائص الهندسة عالية المستوى بشكل مختلف قليلاً عندما لا يكون هناك <! DOCTYPE HTML> `في HTML. الأشياء الغريبة ممكنة.
37
37
38
-
In modern HTML we should always write `DOCTYPE`.
39
-
```
38
+
في HTML الحديثة يجب أن نكتب دائمًا "DOCTYPE".
39
+
``
40
40
41
-
## Width/height of the document
41
+
## عرض / ارتفاع الوثيقة
42
42
43
-
Theoretically, as the root document element is `document.documentElement`, and it encloses all the content, we could measure document full size as `document.documentElement.scrollWidth/scrollHeight`.
43
+
نظريًا ، نظرًا لأن عنصر المستند الجذر هو `document.documentElement` ، ويشتمل على كل المحتوى ، يمكننا قياس حجم المستند بالكامل على أنه`document.documentElement.scrollWidth / ScrollHeight`.
44
44
45
-
But on that element, for the whole page, these properties do not work as intended. In Chrome/Safari/Opera if there's no scroll, then `documentElement.scrollHeight` may be even less than `documentElement.clientHeight`! Sounds like a nonsense, weird, right?
45
+
ولكن في هذا العنصر ، بالنسبة للصفحة بأكملها ، لا تعمل هذه الخصائص على النحو المنشود. في Chrome / Safari / Opera إذا لم يكن هناك تمرير ، فقد يكون `documentElement.scrollHeight`أقل من`documentElement.clientHeight`! يبدو هراء ، غريب ، أليس كذلك؟
46
46
47
-
To reliably obtain the full document height, we should take the maximum of these properties:
47
+
للحصول على ارتفاع المستند بشكل موثوق ، يجب أن نأخذ الحد الأقصى من هذه الخصائص:
48
48
49
49
```js run
50
50
let scrollHeight =Math.max(
@@ -56,101 +56,100 @@ let scrollHeight = Math.max(
56
56
alert('Full document height, with scrolled out part: '+ scrollHeight);
57
57
```
58
58
59
-
Why so? Better don't ask. These inconsistencies come from ancient times, not a "smart" logic.
59
+
لما ذلك؟ من الأفضل ألا تسأل. هذه التناقضات تأتي من العصور القديمة ، وليس منطق "ذكي".
60
60
61
-
## Get the current scroll [#page-scroll]
61
+
## احصل على التمرير الحالي[#page-roll]
62
62
63
-
DOM elements have their current scroll state in `elem.scrollLeft/scrollTop`.
63
+
عناصر DOM لها حالة التمرير الحالية في `elem.scrollLeft / rollTop`.
64
64
65
-
For document scroll `document.documentElement.scrollLeft/Top` works in most browsers, except older WebKit-based ones, like Safari (bug [5991](https://bugs.webkit.org/show_bug.cgi?id=5991)), where we should use `document.body` instead of `document.documentElement`.
65
+
بالنسبة إلى تمرير المستند ، يعمل المستند document.documentElement.scrollLeft / Top`في معظم المتصفحات ، باستثناء المتصفحات القديمة التي تستند إلى WebKit ، مثل Safari (الخطأ [5991](https://bugs.webkit.org/show_bug.cgi؟id=5991) ) ، حيث يجب أن نستخدم `document.body`بدلاً من`document.documentElement`.
66
66
67
-
Luckily, we don't have to remember these peculiarities at all, because the scroll is available in the special properties `window.pageXOffset/pageYOffset`:
67
+
لحسن الحظ ، ليس علينا أن نتذكر هذه الخصائص على الإطلاق ، لأن التمرير متاح في الخصائص الخاصة`window.pageXOffset/pageYOffset`:
68
68
69
69
```js run
70
70
alert('Current scroll from the top: '+window.pageYOffset);
71
71
alert('Current scroll from the left: '+window.pageXOffset);
To scroll the page from JavaScript, its DOM must be fully built.
76
+
## التمرير: التمرير إلى التمرير التمرير التمرير العرضي [# window-تمرير]
80
77
81
-
For instance, if we try to scroll the page from the script in `<head>`, it won't work.
82
-
```
78
+
احذر
79
+
لتمرير الصفحة من JavaScript ، يجب بناء DOM بالكامل.
83
80
84
-
Regular elements can be scrolled by changing `scrollTop/scrollLeft`.
81
+
على سبيل المثال ، إذا حاولنا تمرير الصفحة من البرنامج النصي في `<head>` ، فلن تعمل.
82
+
``
85
83
86
-
We can do the same for the page using `document.documentElement.scrollTop/Left` (except Safari, where `document.body.scrollTop/Left` should be used instead).
84
+
يمكن تمرير العناصر العادية عن طريق تغيير `التمرير / التمرير لليسار`.
87
85
88
-
Alternatively, there's a simpler, universal solution: special methods [window.scrollBy(x,y)](mdn:api/Window/scrollBy) and [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo).
86
+
يمكننا فعل الشيء نفسه للصفحة باستخدام `document.documentElement.scrollTop / Left` (باستثناء Safari ، حيث يجب استخدام` document.body.scrollTop / Left` بدلاً من ذلك).
89
87
90
-
- The method `scrollBy(x,y)` scrolls the page *relative to its current position*. For instance, `scrollBy(0,10)` scrolls the page `10px` down.
88
+
بدلاً من ذلك ، هناك حل أبسط وعالمي: طرق خاصة [window.scrollBy (x، y)] (mdn: api / Window / rollBy) و [window.scrollTo (pageX، pageY)] (mdn: api / Window / rollTo) .
91
89
92
-
```online
93
-
The button below demonstrates this:
90
+
- طريقة `التمرير (x، y) 'تقوم بتمرير الصفحة * بالنسبة إلى موقعها الحالي *. على سبيل المثال ، يؤدي `التمرير (0،10)` إلى تمرير الصفحة `10 بكسل` لأسفل.
- The method `scrollTo(pageX,pageY)` scrolls the page *to absolute coordinates*, so that the top-left corner of the visible part has coordinates `(pageX, pageY)` relative to the document's top-left corner. It's like setting `scrollLeft/scrollTop`.
92
+
`` online
93
+
يوضح الزر أدناه هذا:
98
94
99
-
To scroll to the very beginning, we can use `scrollTo(0,0)`.
- طريقة `التمرير (pageX ، pageY)` تقوم بتمرير الصفحة * إلى إحداثيات مطلقة * ، بحيث يكون للزاوية العلوية اليسرى للجزء المرئي إحداثيات `((pageX ، pageY)` بالنسبة إلى الزاوية العلوية اليسرى للمستند. الأمر أشبه بإعداد `التمرير الأيسر / التمرير العلوي`.
100
98
99
+
للتمرير إلى البداية ، يمكننا استخدام `التمرير (0،0)`.
For completeness, let's cover one more method: [elem.scrollIntoView(top)](mdn:api/Element/scrollIntoView).
108
+
للاستكمال ، دعنا نغطي طريقة أخرى: [elem.scrollIntoView(top)](mdn:api / Element / rollIntoView).
110
109
111
-
The call to `elem.scrollIntoView(top)` scrolls the page to make `elem` visible. It has one argument:
110
+
يؤدي استدعاء `elem.scrollIntoView (أعلى)` إلى تمرير الصفحة لإظهار `elem`. لها حجة واحدة:
112
111
113
-
- if `top=true` (that's the default), then the page will be scrolled to make `elem` appear on the top of the window. The upper edge of the element is aligned with the window top.
114
-
- if `top=false`, then the page scrolls to make `elem` appear at the bottom. The bottom edge of the element is aligned with the window bottom.
112
+
- إذا كان `top = true` (هذا هو الافتراضي) ، فسيتم تمرير الصفحة لإظهار` elem` في أعلى النافذة. يتم محاذاة الحافة العلوية للعنصر مع أعلى النافذة.
113
+
- إذا كان `top = false` ، فتمرر الصفحة لتظهر` elem` في الأسفل. يتم محاذاة الحافة السفلية للعنصر مع أسفل النافذة.
115
114
116
115
```online
117
-
The button below scrolls the page to make itself show at the window top:
116
+
يمرر الزر أدناه الصفحة لإظهار نفسها في أعلى النافذة:
Sometimes we need to make the document "unscrollable". For instance, when we need to cover it with a large message requiring immediate attention, and we want the visitor to interact with that message, not with the document.
127
+
نحتاج أحيانًا إلى جعل المستند "غير قابل للتمرير". على سبيل المثال ، عندما نحتاج إلى تغطيتها برسالة كبيرة تتطلب اهتمامًا فوريًا ، ونريد من الزائر أن يتفاعل مع هذه الرسالة ، وليس مع المستند.
129
128
130
-
To make the document unscrollable, it's enough to set `document.body.style.overflow = "hidden"`. The page will freeze on its current scroll.
129
+
لجعل المستند غير قابل للتمرير ، يكفي تعيين `document.body.style.overflow =" hidden"`. سيتم تجميد الصفحة في التمرير الحالي.
The first button freezes the scroll, the second one resumes it.
140
-
```
138
+
يجمد الزر الأول التمرير ، ويستأنفه الزر الثاني.
139
+
``
141
140
142
-
We can use the same technique to "freeze" the scroll for other elements, not just for `document.body`.
141
+
يمكننا استخدام نفس التقنية "لتجميد" التمرير للعناصر الأخرى ، وليس فقط لـ `المستند.
143
142
144
-
The drawback of the method is that the scrollbar disappears. If it occupied some space, then that space is now free, and the content "jumps" to fill it.
143
+
عيب الطريقة هو اختفاء شريط التمرير. إذا كانت تحتل بعض المساحة ، فإن هذه المساحة الآن خالية ، ويزداد المحتوى لملئها.
145
144
146
-
That looks a bit odd, but can be worked around if we compare `clientWidth` before and after the freeze, and if it increased (the scrollbar disappeared) then add `padding` to `document.body` in place of the scrollbar, to keep the content width the same.
145
+
يبدو هذا غريبًا بعض الشيء ، ولكن يمكن التعامل معه إذا قارنا `ClientWidth` قبل التجميد وبعده ، وإذا زاد (اختفى شريط التمرير) ، فأضف` padding` إلى `document.body` بدلاً من شريط التمرير ، إلى حافظ على عرض المحتوى كما هو.
147
146
148
-
## Summary
147
+
## الملخص
149
148
150
-
Geometry:
149
+
الهندسة:
151
150
152
-
- Width/height of the visible part of the document (content area width/height): `document.documentElement.clientWidth/Height`
153
-
- Width/height of the whole document, with the scrolled out part:
151
+
- عرض / ارتفاع الجزء المرئي من المستند (عرض / ارتفاع منطقة المحتوى): `document.documentElement.clientWidth / Height`
152
+
- عرض / ارتفاع الوثيقة بأكملها ، مع الجزء الممرر:
154
153
155
154
```js
156
155
let scrollHeight = Math.max(
@@ -160,11 +159,11 @@ Geometry:
160
159
);
161
160
```
162
161
163
-
Scrolling:
162
+
التمرير:
164
163
165
-
- Read the current scroll: `window.pageYOffset/pageXOffset`.
166
-
- Change the current scroll:
164
+
- قراءة التمرير الحالي: `window.pageYOffset / pageXOffset`.
0 commit comments