دالة scroll-state() في CSS

مثل طلبات البحث عن الحاويات، ولكن لطلبات البحث التي لا تنتهي أو تتوقف أو تتزايد بشكل كبير.

Adam Argyle

تاريخ النشر: 15 كانون الثاني (يناير) 2025

يستند الإصدار 133 من Chrome إلى طلبات البحث عن الحاوية من خلال تقديم طلبات بحث عن حاوية حالة الانتقال. يمكن الآن الاستعلام عن الحالة التي يديرها المتصفّح لموضع العناصر الثابتة ونقاط التصاق التمرير والعناصر القابلة للتقديم أو الإيقاف من CSS وتعديلها.

نظرة عامة

قبل إجراء طلبات بحث عن حالة الانتقال، عليك استخدام JavaScript لمعرفة ما إذا كان العنصر قد توقف عن الانتقال أو تم تثبيته أو كان قابلاً للانتقال. تتوفّر الآن طريقة أفضل أداءً في مسار المعايير لمعرفة هذه المعلومات والتكيّف وفقًا لذلك. تتوفّر أيضًا طريقة جديدة لتشغيل الصور المتحركة، ما يتيح استخدام الصور المتحركة التي يتم تشغيلها من خلال الانتقال إلى أعلى الصفحة أو أسفلها من CSS.

في ما يلي نظرة عامة على طلبات البحث عن الحالة المتاحة من الإصدار 133 من Chrome:

حالة "التعليق":
بدء تغييرات في الأنماط عند تثبيت عنصر على أحد الحواف
الحالة المُعدَّة للعرض على الشاشة بالكامل:
بدء تغييرات في الأنماط عند تثبيت عنصر على محور
حالة التمرير:
يتغيّر نمط العنصر المشغِّل عندما يكون العنصر ممتلئًا.

والخبر السارّ هو أنّ كل ما تعلمته من طلبات بحث الحاوية سيساعدك في التعامل مع طلبات بحث حالة الانتقال.

هناك أيضًا منطقة غير معروفة بين الصور المتحركة المستندة إلى الانتقال في الصفحة وطلبات البحث عن حاويات حالة الانتقال في الصفحة. علينا تجربة التوقيت والسياق لمعرفة ما إذا كانت الصورة المتحركة المستندة إلى الانتقال في الصفحة أو الصورة المتحركة المستندة إلى حالة الانتقال في الصفحة التي يتم تشغيلها من خلال الانتقال في الصفحة ستكون الأفضل. يوضّح الفيديو والعرض التجريبي التاليان المشكلة، وهي صورة متحركة يتم تنشيطها عند تثبيتها مقارنةً بصورة متحركة يتم تشغيلها عند الانتقال إلى الأسفل أو للأعلى.

(على يمين الشاشة) صورة متحركة يتم تشغيلها باستخدام دالة scroll-state()‎، (على يمين الشاشة) صورة متحركة يتم تشغيلها باستخدام التمرير
https://codepen.io/web-dot-dev/pen/emOrBaV

أول طلب بحث عن حالة الانتقال إلى الأسفل

الخطوة الأولى هي تحديد الحاوية باستخدام قيمة جديدة للسمة container-type. كما هو الحال مع طلب البحث عن الحاوية، العنصر الذي تريد البحث عنه هو العنصر الذي تمنحه container-type وcontainer-name اختياريًا. باستخدام طلبات البحث عن حالة التمرير، يمكنك منح العنصر الذي يتم تثبيته أو تثبيته أو تجاوزه container-type: scroll-state.

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;
}

الخطوة الثانية هي اختيار العنصر الثانوي للحاوية الذي سيستجيب للحالة، وكما هو الحال مع طلبات البحث عن الحاويات، لا يمكن أن يكون هذا العنصر هو العنصر نفسه الذي يحتوي على container-type.

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

الخطوة الثالثة هي تجربتها. سيطبّق مثال CSS التالي النمط الأحمر على الخلفية عندما يلتصق عنصر .stuck-top في أعلى الصفحة عند 0. من خلال إضافة بضعة أسطر إضافية إلى ملف CSS الذي سبق أن كتبناه وعنصر إضافي يحتوي على عنصر وكيل لحالة المتصفّح، تصبح مكوّناتنا أكثر ذكاءً في ما يتعلّق بالعناصر المحيطة بها.

https://codepen.io/web-dot-dev/pen/ByBxpwR

التحسين المتدرّج

يمكن أن تسمح لك قاعدة at-rule‏ @supports والدمج بإضافة تحسين تدريجي أو استخدام مشروط للميزات في بضعة أسطر إضافية من الرمز فقط:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  @supports (container-type: scroll-state) {
    > nav {
      @container scroll-state(stuck: top) {
        background: Highlight;
        color: HighlightText;
      }
    }
  }
}

احرص أيضًا على استخدام @media (prefers-reduced-motion: no-preference) {} حول الصور المتحركة، إذا كنت بصدد إضافة تأثيرات متحركة إلى العناصر حول الصفحة باستخدام طلبات بحث عن حالة الانتقال.

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

عجز عن التقدم

هل يجب تسمية هذا القسم "المواقف الصعبة"؟ هذه مجموعة صغيرة من حالات استخدام العنصر المُلصق، بالإضافة إلى قسم إضافي من الأفكار التي يجب إنشاؤها.

@container scroll-state(stuck: top) {}
@container scroll-state(stuck: bottom) {}

قائمة البنية الكاملة

إضافة ظلّ عند التصاق العنصر

إنّ إحدى حالات الاستخدام الأكثر شيوعًا لطلب البحث المتوقف هي في أشرطة التنقّل التي تريد إضافة box-shadow عند توقّفها، حتى تبدو وكأنها تطفو فوق المحتوى الذي تتراكب عليه.

https://codepen.io/web-dot-dev/pen/GgKdryj 
.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    transition: box-shadow .3s ease;

    @container scroll-state(stuck: top) {
      box-shadow: var(--shadow-5);
    }
  }
}

تفعيل العنوان الحالي الذي لا يمكن التمرير فوقه

من السيناريوهات الشائعة الأخرى لتلقّي ملاحظات بشأن واجهة المستخدم الملصقة هي تمييز العنصر المُلصق حاليًا. في قائمة بالفرق الموسيقية مرتبة أبجديًا، يمكن أن يكون ذلك مفيدًا جدًا ومفيدًا للتجربة.

https://codepen.io/web-dot-dev/pen/pvzVRaK 
.sticky-slide {
  dt {
    container-type: scroll-state;
    position: sticky;
    inset-block-start: 0;
    inset-inline: 0;

    > header {
      transition: 
        background .3s ease,
        box-shadow .5s ease;

      @container scroll-state(stuck: top) {
        background: hsl(265 100% 27%);
        box-shadow: 0 5px 5px #0003;
      }
    }
  }
}

في ما يلي صيغة أخرى، حيث تكون العناوين على جانب عناصر القائمة. هناك الكثير من الإمكانات.

https://codepen.io/web-dot-dev/pen/azoGpGg

أفكار إضافية

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

الصور التي التقطتها

باستخدام طلبات البحث عن الحالة المُجمَّعة، يمكننا إزالة بعض المسؤوليات من JavaScript وأحداث Snap، ونقل المعالجة إلى CSS.

@container scroll-state(snapped: x) {}
@container scroll-state(snapped: y) {}
@container scroll-state(snapped: inline) {}
@container scroll-state(snapped: block) {}

قائمة البنية الكاملة

تذكير بسيط: في حال تخطّيت القسم أول طلب بحث عن حالة التمرير، الحاوية لطلب البحث عن المقتطف هي العنصر الذي يحتوي على scroll-snap-align، ويجب أن يكون العنصر الذي يمكنه التكيّف عنصرًا فرعيًا لهذا العنصر. وهذا يعني أنّ هناك ثلاثة عناصر مطلوبة لإعداد هذا الإجراء:

a scroll container with `scroll-snap-type`
⤷ a snap target with both `scroll-snap-align` and `container-type: scroll-state`
    ⤷ a child of the snap target that can query the container for snap state

تحسين العنصر المُلصق بصريًا

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

https://codepen.io/web-dot-dev/pen/NPKMdBX 
.demo {
  overflow: auto hidden;
  scroll-snap-type: x mandatory;

  > article {
    container-type: scroll-state;
    scroll-snap-align: center;

    @supports (container-type: scroll-state) {
      > * {
        transition: opacity .5s ease;

        @container not scroll-state(snapped: x) {
          opacity: .25;
        }
      }
    }
  }
}

عرض الترجمة والشرح للعنصر المُلصق

هذا مثال جيد على كيفية تفعيل طلبات البحث عن حالة الانتقال إلى أعلى أو أسفل للصورة المتحرّكة التي يتم تشغيلها من خلال الانتقال إلى أعلى أو أسفل الصفحة. وهو أيضًا مثال جيد على الحالات التي يكون فيها استخدام ميزة "تقليل الحركة" مفيدًا في CSS.

https://codepen.io/web-dot-dev/pen/XJrqpBG 
.demo {
  overflow-x: auto;
  scroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  > .card {
    container-type: scroll-state;
    scroll-snap-align: center;

    @supports (container-type: scroll-state) {
      @media (prefers-reduced-motion: no-preference) {
        figcaption {
          transform: translateY(100%);

          @container scroll-state(snapped: x) {
            transform: translateY(0);
          }
        }
      }
    }
  }
}

إضافة تأثيرات متحركة إلى عناصر الشريحة

من الشائع جدًا إضافة تأثيرات متحركة إلى عناصر عرض الشرائح أو العرض التقديمي أثناء إلقاء محاضرة. كان من المزعِج جدًا كتابة مراقب تقاطع لهذا الغرض، والذي كان كل ما يفعله هو ضبط فئة على الشريحة. لم نعد بحاجة إلى أي JavaScript.

https://codepen.io/web-dot-dev/pen/dPbeNqY 
html {
  scroll-snap-type: y mandatory;
}

section {
  container-type: scroll-state;
  scroll-snap-align: start;
  scroll-snap-stop: always;

  @supports (container-type: scroll-state) {
    @media (prefers-reduced-motion: no-preference) {
      > h1 {
        transition: opacity .5s ease, transform .5s var(--ease-spring-3);
        transition-delay: .5s;
        opacity: 0;
        transform: scale(1.25);

        @container scroll-state(snapped: block) {
          opacity: 1;
          transform: scale(1);
        }
      }
    }
  }
}

قد تلاحظ أنّ جميع طلبات البحث عن حالة CSS المُجمَّعة تتصرف مثل scrollsnapchanging، على عكس scrollsnapchange. يمنحك ذلك أقرب نقطة ممكنة لتوفير ملاحظات مرئية عن العنصر المُلصق. إذا كان الحدث سريعًا جدًا، ننصحك باستخدام حدث JavaScript.

قابل للتمرير

سيكون طلب البحث عن حالة التمرير مفيدة جدًا في عرض العناصر المرئية التي يمكن التمرير فيها. وقبل طلبات البحث عن حالة الانتقال، كانت هذه معلومات يصعب معرفتها. 

@container scroll-state(scrollable: top) {}
@container scroll-state(scrollable: right) {}
@container scroll-state(scrollable: bottom) {}
@container scroll-state(scrollable: left) {}

قائمة البنية الكاملة

الإشارة إلى التمرير باستخدام الظلال

هناك خدعة CSS شهيرة من تأليف Lea Verou تستخدم background-attachment: local لتحقيق تأثير مشابه لهذا، بالإضافة إلى طريقة لتنفيذ ذلك باستخدام الحركة المستندة إلى الانتقال. لكل أسلوب إيجابيات وسلبيات، وعلينا استكشاف الحالات التي يكون فيها كل أسلوب من هذه الأساليب هو الأنسب.

يستخدم المثال التالي عنصرًا واحدًا ثابتًا يمتد على مساحة التمرير. يتضمّن التدرّج اللوني في أعلى الشاشة والتدرّج اللوني في أسفل الشاشة تأثيرًا متحركًا للعتامة باستخدام @property عند تطبيق طلب البحث عن حالة التمرير السياقي: @container scroll-state(scrollable: top).

يُرجى العلم أيضًا أنّها أول حاوية تكون حاوية size وحاوية scroll-state في الوقت نفسه.

https://codepen.io/web-dot-dev/pen/OPLZWBj 
.scroll-container {
  container-type: scroll-state size;
  overflow: auto;

  &::after {
    content: " ";

    background: var(--_shadow-top), var(--_shadow-bottom);
    transition: 
      --_scroll-shadow-color-1-opacity .5s ease,
      --_scroll-shadow-color-2-opacity .5s ease;

    @container scroll-state(scrollable: top) {
      --_scroll-shadow-color-1-opacity: var(--_shadow-color-opacity, 25%);
    }

    @container scroll-state(scrollable: bottom) {
      --_scroll-shadow-color-2-opacity: var(--_shadow-color-opacity, 25%);
    }
  }
}
.

طلب السهم

في بعض الأحيان، يمكن أن يساعد عرض سهم المستخدمين في اكتشاف أنّه يمكن التمرير في منطقة معيّنة. وتميل هذه العناصر إلى الإشارة إلى الاتجاه الذي يمكن أن يحدث فيه الانتقال للأعلى أو للأسفل، وتختفي عندما لا تكون ضرورية بعد الآن. يمكنك إجراء ذلك باستخدام الرمز البرمجي التالي.

https://codepen.io/web-dot-dev/pen/OPLZWBj 
@container scroll-state((scrollable: top) or (not (scrollable: bottom))) {
  translate: 0 calc(100% + 10px);
}

@container scroll-state((scrollable: top) and (not (scrollable: bottom))) {
  translate: 0 calc(100% + 10px);
  rotate: .5turn;
}

العودة الى أعلى الصفحة

ومن التفاعلات الشائعة الأخرى في حالة الانتقال إلى أعلى الصفحة هي زرّ "الانتقال إلى أعلى الصفحة". تؤدي التعليمة البرمجية التالية إلى اختفاء زر الانتقال إلى الأعلى عندما لا يكون هناك مكان للانتقال للأعلى.

هذا الحلّ معكوس قليلاً، ولكنه يتيح لك تقليل مقدار CSS. يظهر الزر بشكل طبيعي في العرض، لذا عليك إخفاؤه عندما لا يكون هناك مكان للانتقال إلى أعلى.

https://codepen.io/web-dot-dev/pen/OPLZWBj 
@container not scroll-state(scrollable: top) {
  translate: 0 calc(100% + 10px);
}

مواصلة الدراسة

إذا كنت تبحث عن مزيد من المعلومات، إليك بعض المصادر التي تتراوح بين تفاصيل المواصفات والمقالات الرائعة الأخرى التي تتناول هذا الموضوع: