ما هو CSS Scroll Snap؟

CSS Scroll Snap هو معيار ويب أصلي يتيح لك إنشاء تجارب تمرير سلسة ومتحكم فيها حيث "ينقض" المحتوى إلى موضعه عندما يقوم المستخدم بالتمرير. بدلاً من التمرير الحر، يتم محاذاة العناصر تلقائيًا إلى نقاط انقض محددة، مما يخلق تأثيرات تمرير شبيهة بالمعارض أو التمرير المرقم دون الحاجة إلى JavaScript. تُستخدم هذه الميزة عادةً في معارض الصور، عروض المنتجات، أقسام الصفحات الكاملة، والواجهات المتوافقة مع الهواتف المحمولة.

وصف الأداة

مولد وملعب تفاعلي لـ CSS Scroll Snap يتيح لك إنشاء حاويات انقض للتمرير مع معاينة مباشرة. يمكنك ضبط اتجاه التمرير (أفقي، عمودي، أو كلاهما)، سلوك الانقض (إلزامي أو قريب)، نقاط المحاذاة (بداية، وسط، أو نهاية)، ومعاملات التباعد. تُولد الأداة شفرة CSS جاهزة للاستخدام لتطبيق معارض تمرير سلس، منزلقات، ومحتوى مرقم.

الميزات

  • معاينة تفاعلية مباشرة - شاهد سلوك الـ scroll snap في الوقت الحقيقي مع عرض بصري
  • التحكم في اتجاه التمرير - اختر الاتجاه الأفقي أو العمودي أو كليهما للتمرير
  • خيارات صرامة الانقض - حدد السلوك الإلزامي (ينقض دائمًا) أو القريب (ينقض عند الاقتراب)
  • إعدادات المحاذاة - عيّن نقاط الانقض إلى البداية أو الوسط أو النهاية داخل الحاوية
  • تخصيص الحاوية - اضبط ارتفاع الحاوية وpadding التمرير
  • إعدادات العنصر - تحكم في عدد العناصر، أبعادها، وهوامش التمرير الخاصة بها
  • إخراج CSS كامل - احصل على شفرة CSS موثقة بالكامل جاهزة للإنتاج
  • قالب HTML - استلم بنية HTML المقابلة لتسهيل التنفيذ السريع
  • تصميم متجاوب - الشفرة المولدة تعمل عبر الأجهزة وأحجام الشاشات المختلفة

حالات الاستخدام

  • إنشاء معارض صور وعروض منتجات دون الحاجة إلى JavaScript
  • بناء مواقع ويب بتمرير كامل للصفحة مع انقض الأقسام
  • تصميم قوائم تمرير أفقية متوافقة مع الهواتف المحمولة
  • تنفيذ منزلقات شهادات العملاء وعروض المحتوى
  • إنشاء عارضين لمحتوى مرقم وصيغ قصصية
  • بناء واجهات تمرير قابلة للوصول مع دعم لوحة المفاتيح
  • تصميم تجارب تنقل شبيهة بالتطبيقات في تطبيقات الويب
  • نمذجة أنماط واجهة مستخدم تعتمد على التمرير بسرعة