CSS scroll-margin-top প্রতিভূতি

পরিভাষা এবং ব্যবহার

scroll-margin-top লক্ষ্যণটির মাধ্যমে নির্ধারিত হয়, যা সংলগ্ন স্থানটি এবং কনটেনারের মধ্যের দূরত্বকে নির্ধারণ করে।

সংলগ্ন স্থান বলতে বোঝায় যে, সাব-উপাদান স্ক্রোল থেকে থামার সময় কনটেনারের মধ্যে স্থায়ী হয়ে যাওয়ার স্থান।সংলগ্ন স্থানটি scroll-snap-align লক্ষ্যণটির সংযোজন করা হয়, কিন্তু সিএসএস লক্ষ্যণটিরও প্রভাব হতে পারে。 direction এবং writing-mode প্রভাবের

নোট:এই লক্ষ্যণটি শুধুমাত্র যখন সংলগ্ন স্থানটি সাব-উপাদানের শীর্ষে নির্ধারিত হয় তখনই কার্যকর হবে。

দেখার জন্য scroll-margin-top লক্ষ্যণটির প্রভাব দেখার জন্য সাব-উপাদানে scroll-margin-top এবং scroll-snap-align লক্ষ্যণটি এবং পিতৃতত্ত্বীয় উপাদানে scroll-snap-type লক্ষ্যণটি

ইনস্ট্যান্স

উদাহরণ 1

সংলগ্ন স্থান এবং কনটেনারের মধ্যে শীর্ষ স্ক্রোল আউটার মার্জিনকে 20px নির্ধারণ করুন:

div {
  scroll-margin-top: 20px;
}

আপনার নিজেই প্রয়াস করুন

উদাহরণ 2: ছবি গ্যালারি

scroll-margin-top লক্ষ্যণটি সংলগ্ন স্থানসম্পন্ন ছবি গ্যালারিতে ব্যবহার করা যেতে পারে।এখানে,scroll-margin-top ব্যবহারকারীকে শীর্ষে একটি ছবি থাকার জন্য জানান।প্রথম ছবিটি সর্কল করে প্রভাব দেখুন:

#container > img {
  scroll-margin-top: 30px;
}

আপনার নিজেই প্রয়াস করুন

উদাহরণ 3: সংলগ্ন স্থান

যাতে, scroll-margin-top লক্ষ্যণটি কার্যকর হবে, সংলগ্ন স্থানটি সাব-উপাদানের শীর্ষে নির্ধারণ করতে হবে।এই উদাহরণে,writing-mode লক্ষ্যণটি সাব-উপাদানের শীর্ষ থেকে সংলগ্ন স্থানটি বদলে ডানদিকে পরিবর্তন করে।এই ধরণের কোড ব্যবহার করে:scroll-margin-top লক্ষ্যণটি আর কাজ করবে না:

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-top: 30px;
  scroll-snap-align: start none;
}

আপনার নিজেই প্রয়াস করুন

CSS স্যাক্সন

scroll-margin-top: 0|value|initial|inherit;

লক্ষ্যণ মান

মান বর্ণনা
0 শীর্ষ স্ক্রোল আউটার মার্জিন 0।এটি ডিফল্ট মান।
length

px, pt, cm প্রভৃতি ইউনিটে শীর্ষ স্ক্রোল আউটার মার্জিনের মান নির্ধারণ করুন।নেতিবাচক মানও অনুমোদিত।

দেখুন:CSS ইউনিট.
initial এই লক্ষ্যণটি তার ডিফল্ট মানে সম্পৃক্ত করুন।দেখুন: initial.
inherit এই লক্ষ্যণটি তার পিতৃতত্ত্বীয় উপাদান থেকে উত্তরাধিকার নেয়।দেখুন: inherit.

টেকনিক্যাল বিবরণ

ডিফল্ট মান: 0
প্রবর্তনশীলতা: না
অ্যানিমেশন নির্মাণ: সমর্থন নেই।দেখুন:অ্যানিমেশন-সংক্রান্ত লক্ষ্যণ.
সংস্করণ: সিএসএস3
জেভাস্ক্রিপ্ট স্যাক্সন: object.style.scrollMarginTop="20px"

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই লক্ষ্যণটি সম্পূর্ণরূপে সমর্থনকারী প্রথম ব্রাউজার সংস্করণটির জন্য দেখায়。

চ্রোম এডজ ফায়ারফক্স সাফারি ওপেরা
69.0 79.0 68.0 14.1 56.0

সংশ্লিষ্ট পৃষ্ঠা

উল্লেখ:CSS দিশা প্রতিভা

উল্লেখ:CSS scroll-snap-align প্রতিভূতি

উল্লেখ:CSS scroll-snap-type প্রতিভূতি

উল্লেখ:CSS writing-mode অপারেশন