CSS scroll-state(), CSS scroll-state()

ধারক প্রশ্ন মত; কিন্তু আটকে থাকা, স্ন্যাপ করা এবং উপচে পড়া প্রশ্নের জন্য।

Adam Argyle

প্রকাশিত: 15 জানুয়ারী, 2025

Chrome 133 স্ক্রোল স্টেট কন্টেইনার ক্যোয়ারী প্রবর্তন করে কন্টেইনার কোয়েরি তৈরি করে। স্টিকি পজিশনিং, স্ক্রোল স্ন্যাপ পয়েন্ট এবং স্ক্রোলযোগ্য উপাদানগুলির জন্য ব্রাউজার ম্যানেজড স্টেট এখন CSS থেকে জিজ্ঞাসা করা এবং মানিয়ে নেওয়া যেতে পারে।

ওভারভিউ

স্ক্রোল স্টেট ক্যোয়ারী করার আগে, কোন এলিমেন্ট আটকে, স্ন্যাপ করা বা স্ক্রোল করা যায় কিনা তা বোঝার জন্য আপনাকে JavaScript ব্যবহার করতে হবে। এখন এই তথ্য জানা এবং সেই অনুযায়ী মানিয়ে নেওয়ার জন্য স্ট্যান্ডার্ড ট্র্যাকে আরও কার্যকরী পদ্ধতি রয়েছে। অ্যানিমেশন ট্রিগার করার একটি নতুন উপায়ও রয়েছে, CSS থেকে স্ক্রোল ট্রিগার করা অ্যানিমেশন আনলক করা।

এখানে Chrome 133 থেকে উপলব্ধ রাষ্ট্রীয় প্রশ্নের একটি ওভারভিউ রয়েছে:

আটকে থাকা অবস্থা :

ট্রিগার শৈলী পরিবর্তন হয় যখন একটি উপাদান একটি প্রান্তে আটকে থাকে।

স্ন্যাপ করা অবস্থা :

ট্রিগার শৈলী পরিবর্তন হয় যখন একটি উপাদান একটি অক্ষে স্ন্যাপ করা হয়।

স্ক্রোলযোগ্য অবস্থা :

কোনো উপাদান উপচে পড়লে ট্রিগার শৈলী পরিবর্তন হয়।

ভাল খবর হল যে আপনি কন্টেইনার কোয়েরি থেকে যা কিছু শিখেছেন তা আপনাকে স্ক্রোল স্টেট কোয়েরির সাথে কাজ করতে সাহায্য করবে।

এছাড়াও স্ক্রোল চালিত অ্যানিমেশন এবং স্ক্রোল স্টেট কন্টেইনার ক্যোয়ারীগুলির মধ্যে অজানা অঞ্চল রয়েছে; একটি স্ক্রল চালিত অ্যানিমেশন বা একটি স্ক্রল ট্রিগারড স্ক্রল-স্টেট অ্যানিমেশন সেরা হবে কিনা তা উদ্ঘাটনের জন্য আমাদের সময় এবং প্রসঙ্গ নিয়ে পরীক্ষা করতে হবে। নিম্নলিখিত ভিডিও এবং ডেমো এই দুর্দশার চিত্র তুলে ধরে; একটি স্ক্রল চালিত অ্যানিমেশনের তুলনায় একটি স্টিকি ট্রিগার অ্যানিমেশন।

(বাম) স্ক্রোল-স্টেট() ট্রিগারড অ্যানিমেশন, (ডান) স্ক্রল-চালিত অ্যানিমেশন
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

প্রগতিশীল বর্ধন

@supports at-rule এবং নেস্টিং আপনাকে কোডের মাত্র কয়েকটি অতিরিক্ত লাইনে প্রগতিশীল বর্ধন বা শর্তসাপেক্ষ বৈশিষ্ট্য ব্যবহার যোগ করতে দেয়:

.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);
    }
  }
}

বর্তমান আটকে থাকা হেডার সক্রিয় করুন

আরেকটি সাধারণ স্টিকি UI প্রতিক্রিয়া দৃশ্যকল্প বর্তমানে আটকে থাকা উপাদানটিকে হাইলাইট করছে। বর্ণানুক্রমিক ব্যান্ডগুলির একটি তালিকায়, এটি অভিজ্ঞতার জন্য অত্যন্ত সহায়ক এবং সহায়ক হতে পারে।

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

ধারণা উপচে পড়া

এখানে স্টিকি ডেমোগুলির একটি তালিকা রয়েছে যা আপনাকে ডেমোতে একটু মশলা যোগ করতে অনুপ্রাণিত করতে পারে, বা স্ক্রোল স্টেট কোয়েরি সহ তাদের জাভাস্ক্রিপ্ট সরাতে পারে। আমি আপনার পছন্দ মতো একটি তৈরি করার চেষ্টা করার পরামর্শ দিচ্ছি, এটি সিনট্যাক্স এবং ধারণাগুলিকে আটকে রাখতে সাহায্য করবে 😏৷

• https://codepen.io/BlogFire/pen/PoGMjaX - স্টিকি স্টিকি নোট ভেরিয়েন্ট
• https://codepen.io/mikegolus/pen/jOZzRzw - একটি টেবিলে ছায়া যোগ করুন যখন তারা লেগে থাকে
• https://codepen.io/MarcRay/pen/PomBeP - শিরোনামের অধীনে নেভিবার ট্রিগারে প্রদর্শিত হবে
• https://codepen.io/kevinpowell/pen/OqKJjK - ফুটার নেভবার প্রকাশ
• https://codepen.io/abhisekz-the-decoder/pen/eKaLRd - স্টিকি কার্ড হেডার
• https://codepen.io/tutsplus/pen/abojPjP - ট্রিগারে মূল্য নির্ধারণের শিরোনামের ছায়া
• https://codepen.io/kevinpowell/pen/KEjMEv - স্টিকি বিভাগের সাইডবার শিরোনাম

স্ন্যাপড

স্ন্যাপড স্টেট কোয়েরির মাধ্যমে আমরা JavaScript এবং Snap Events থেকে কিছু দায়িত্ব সরিয়ে ফেলতে পারি এবং হ্যান্ডলিংকে 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);
          }
        }
      }
    }
  }
}

স্লাইড উপাদান মধ্যে অ্যানিমেটিং

বক্তৃতা দেওয়ার সময় স্লাইড শো বা উপস্থাপনার উপাদানগুলিকে অ্যানিমেট করা সত্যিই সাধারণ। এটির জন্য একটি ছেদ পর্যবেক্ষক লিখতে এটি বেশ বিরক্তিকর ছিল, যা স্লাইডে একটি ক্লাস সেট করা হয়েছিল। এখন আমাদের কোন জাভাস্ক্রিপ্ট লাগবে না।

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) {}

সম্পূর্ণ সিনট্যাক্স তালিকা

ছায়া দিয়ে স্ক্রোল নির্দেশ করুন

Lea Verou-এর একটি বিখ্যাত CSS কৌশল রয়েছে যা 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);
}

অধ্যয়ন চালিয়ে যান

আপনি যদি আরও খুঁজছেন, এখানে কয়েকটি সংস্থান রয়েছে যা স্পেসিফিকেশন বিশদ থেকে শুরু করে এই বিষয়টিকে কভার করে অন্যান্য দুর্দান্ত নিবন্ধ পর্যন্ত রয়েছে:

• আর কি আমরা কন্টেইনার ক্যোয়ারী করতে সক্ষম হওয়া উচিত? https://github.com/w3c/csswg-drafts/issues/5989
• scroll-state() ব্যাখ্যাকারী - https://drafts.csswg.org/css-conditional-5/scroll_state_explainer.md
• scroll-state() CSS স্পেসিফিকেশন - https://www.w3.org/TR/css-conditional-5/#scroll-state-container
• HTML ইভেন্ট লুপে লেআউট স্ন্যাপশটিং
• রাষ্ট্রীয় প্রশ্নের উপর একটি পডকাস্ট পর্ব - https://nerdy.dev/the-css-podcast-on-state-queries
• আরো নিবন্ধ
  • https://utilitybend.com/blog/is-the-sticky-thing-stuck-is-the-snappy-item-snapped-a-look-at-state-queries-in-css/
  • https://ishadeed.com/article/css-state-queries/
  • https://csscade.com/can-you-detect-overflow-with-css/
  • https://css-tip.com/overflow-detection/ - স্ক্রোল চালিত অ্যানিমেশনের সাহায্যে এমনভাবে সনাক্ত করা যা কেবলমাত্র শিশুরা জানতে পারে না (প্রতারণার ট্রেডঅফ সহ)