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

সংজ্ঞা ও ব্যবহার

scroll-padding-top এই অ্যাট্রিবিউট সংজ্ঞায়িত হয়, কনটেইনারের শীর্ষ থেকে সাব-এলিমেন্ট সরকার স্থানের দূরত্বকে।

সরকার স্থান বলতে বোঝায়, সরকার পড়ার সময়, সাব-এলিমেন্ট কোনো কনটেইনারের মধ্যে সরকার পড়ার স্থানের কথা।

আবস্থানকারী স্থানটি সংযোজিত হয় scroll-snap-align এই বৈশিষ্ট্যটির সেট করা হয়, কিন্তু মাঝেমধ্যেই CSS বৈশিষ্ট্যটির direction এবং writing-mode এই বৈশিষ্ট্যটির

মন্তব্য:এই বৈশিষ্ট্যটি কেবল যখন আবস্থানকারী সাবদিকের উপরে সংযোজিত হয়,

দেখা যাবে scroll-padding-top এই বৈশিষ্ট্যটির প্রভাব, scroll-snap-align এবং scroll-padding-top এবং scroll-snap-type বৈশিষ্ট্যটি

উদাহরণ

উদাহরণ 1

সর্বস্ব সর্বস্ব সর্বস্ব সর্বস্ব scroll-padding-top কনটেনারের উপর থেকে আবস্থানকারী সাবদিকের থেকে 20px দূরত্বে সংযোজিত হয়

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

আপনার নিজেই চেষ্টা করুন

উদাহরণ 2: ছবি সংগ্রহ

scroll-padding-top এই বৈশিষ্ট্যটি একটি আবস্থানকারী ছবি গ্যালারির জন্য ব্যবহার করা যায়, যাতে ছবি একটি স্থায়ী ইলেকট্রনের নীচে উঠে আসে

#container {
  scroll-padding-top: 30px;
}

আপনার নিজেই চেষ্টা করুন

উদাহরণ 3: শীর্ষে সর্বস্ব সর্বস্ব সর্বস্ব

যখন দুই দিকেই আবস্থান সংযোজিত হয়, তখনও কনটেনারের উপরে সেট করা যায় scroll-padding-top এই বৈশিষ্ট্যটি। উপরের ইলেকট্রনের থেকে ভারতীয় বরাবর সরানো দেখুন

#container {
  scroll-padding-top: 30px;
}

আপনার নিজেই চেষ্টা করুন

উদাহরণ 4: আবস্থান সংযোজিত হয়

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

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

আপনার নিজেই চেষ্টা করুন

CSS স্যাক্সন

scroll-padding-top: auto|value|initial|inherit;

বৈশিষ্ট্য মান

মান বর্ণনা
auto ডিফল্ট মান
length

px, pt, cm ইত্যাদি ইউনিটে scroll-padding-top নির্দিষ্ট করুন

নেতিবাচক মান ব্যবহার করা যাবে না। দেখুন:CSS ইউনিট.
% বান্ধনীস্থল ইলেকট্রনের চারিদিকের প্রতিশত হিসাবে scroll-padding-top নির্দিষ্ট করুন
initial এই বৈশিষ্ট্যটি তার ডিফল্ট মানে সংযোজিত হয়। দেখুন initial.
inherit এই বৈশিষ্ট্যটি তার পিতৃ ইলেকট্রনের থেকে উত্তরসূরী হয়। দেখুন inherit.

প্রযুক্তিগত বিবরণ

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

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

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

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

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

উল্লেখ:CSS ডায়রেকশন এট্রিবিউট

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

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

উল্লেখ:CSS writing-mode প্রতিযোগিতা