**scroll-behavior: smooth:** يُضيف تمريراً سلساً للروابط الداخلية وany scroll programmatic. `html { scroll-behavior: smooth; }`
**scroll-snap-type:** يُثبّت نقاط توقف عند التمرير (مثل الكاروسيل أو الشرائح): - `x mandatory` — تثبيت أفقي إجباري - `y proximity` — تثبيت عمودي قريب (يلتقط فقط إذا كان قريباً)
**scroll-snap-align:** على العناصر الأبناء: `start | end | center`
**scroll-snap-stop:** - `normal` — قد يتخطى نقاط التثبيت (الافتراضي) - `always` — يتوقف عند كل نقطة حتى عند التمرير السريع
**overscroll-behavior:** ما يحدث عند الوصول لنهاية منطقة التمرير: - `auto` — يُمرّر الأب (الافتراضي) - `contain` — يمنع انتقال التمرير للأب - `none` — يمنع التمرير الزائد (bounce)
**scroll-padding / scroll-margin:** لحساب العناصر الثابتة (sticky navbar) عند القفز للقسم.
| 1 | /* تمرير سلس عالمي */ |
| 2 | html { scroll-behavior: smooth; } |
| 3 | |
| 4 | /* كاروسيل أفقي */ |
| 5 | .carousel { |
| 6 | display: flex; |
| 7 | overflow-x: auto; |
| 8 | scroll-snap-type: x mandatory; |
| 9 | -webkit-overflow-scrolling: touch; |
| 10 | } |
| 11 | |
| 12 | .carousel .slide { |
| 13 | flex: 0 0 100%; |
| 14 | scroll-snap-align: start; |
| 15 | scroll-snap-stop: always; |
| 16 | } |
مثال 1: Carousel CSS فقط
| 1 | .carousel-wrapper { |
| 2 | overflow-x: auto; |
| 3 | scroll-snap-type: x mandatory; |
| 4 | -webkit-overflow-scrolling: touch; |
| 5 | display: flex; |
| 6 | gap: 0; |
| 7 | scrollbar-width: none; /* إخفاء scrollbar */ |
| 8 | } |
| 9 | |
| 10 | .carousel-wrapper::-webkit-scrollbar { display: none; } |
| 11 | |
| 12 | .carousel-slide { |
| 13 | flex: 0 0 100%; |
| 14 | scroll-snap-align: center; |
| 15 | scroll-snap-stop: always; |
| 16 | height: 400px; |
| 17 | display: flex; |
| 18 | align-items: center; |
| 19 | justify-content: center; |
| 20 | } |
| 21 | |
| 22 | /* منع انتقال التمرير للأب في modal */ |
| 23 | .modal-content { |
| 24 | overflow-y: auto; |
| 25 | overscroll-behavior-y: contain; |
| 26 | max-height: 80vh; |
| 27 | } |
| 28 | |
| 29 | /* مسافة للـ navbar الثابت */ |
| 30 | html { scroll-padding-top: 80px; } /* = ارتفاع navbar */ |