CSS scroll-margin অপারেটর

বিবরণ ও ব্যবহার

scroll-margin এই এক্সিফন্ট হল স্ন্যাপ অবস্থান এবং কন্টেনারের মধ্যে দূরত্ব নির্দিষ্ট করে。

আর্থেক্ষেত্রে, যখন আপনি স্থায়ী হওয়ার পর স্ক্রোল দ্রুত সংযোজিত হয় এবং স্ন্যাপ অবস্থান (স্ন্যাপ পদস্থান) এবং কন্টেনারের মধ্যে নির্দিষ্ট দূরত্বে স্থায়ী হয়。

স্ন্যাপ অবস্থান বলতে মানে হল, যখন সাবগত এলাকা স্থায়ী হয়, তখন এটি কোনো কন্টেনারের মধ্যে কোনো স্থানে স্ন্যাপ হয়。

scroll-margin এই এক্সিফন্ট হল নিচের এক্সিফন্টগুলির সংক্ষিপ্ত রূপ:

scroll-margin এই এক্সিফন্ট মানগুলির সেটিং বিভিন্ন পদ্ধতিতে করা যায়:

যদি scroll-margin এক্সিফন্ট চারটি মান থাকে:

scroll-margin: 15px 30px 60px 90px;
  • শীর্ষ দূরত্ব 15px
  • ডানদিক দূরত্ব 30px
  • তালুক দূরত্ব 60px
  • বামদিক দূরত্ব 90px

যদি scroll-margin এক্সিফন্ট তিনটি মান থাকে:

scroll-margin: 15px 30px 60px;
  • শীর্ষ দূরত্ব 15px
  • বাম এবং ডানদিকের দূরত্ব ৩০px
  • তালুক দূরত্ব 60px

যদি scroll-margin এক্সিফন্ট দুটি মান থাকে:

scroll-margin: 15px 30px;
  • শীর্ষ এবং নিচের দূরত্ব ১৫px
  • বাম এবং ডানদিকের দূরত্ব ৩০px

যদি scroll-margin বৈশিষ্ট্যটির একটি মান থাকে:

scroll-margin: 10px;
  • চারটি দিকের দূরত্ব ১০px

দেখার জন্য scroll-margin বৈশিষ্ট্যের প্রভাব, পুরোপুরি দেখার জন্য সাবদিক উপাদানে scroll-margin এবং scroll-snap-align বৈশিষ্ট্য scroll-snap-type বৈশিষ্ট্য

উপদেশ:নিম্নলিখিত উদাহরণে, সকল দিকের স্ক্রোল মার্গিন সেট করা হয়েছে, কিন্তু scroll-snap-align প্রতিটি উপাদানের "start" মানে নেওয়া হয়, তাই শুধুমাত্র শীর্ষের স্ক্রোল মার্গিনটি পরিবর্তিত হয়েছে যা স্ক্রোল আচরণকে পরিবর্তন করেছে。

প্রতিমান

উদাহরণ 1

স্ক্রোল মার্গিন ২০px সহ এক্সকোর্টর এবং কনটেনারের মধ্যে সেট করা

div {
  scroll-margin: 20px;
}

স্বয়ং প্রয়োগ করুন

উদাহরণ 2: ছবি ভান্ডার

scroll-margin এই বৈশিষ্ট্যটি সংযুক্ত ছবি ভান্ডারে ব্যবহার করা যায়। এখানেscroll-margin ব্যবহারকারীকে ডানদিকে একটি অন্য ছবি দেখাতে হবে। প্রথম ছবিটির উপর স্ক্রোল করার পর দেখুন:

#container > img {
  scroll-margin: 0 0 0 30px;
}
বেইজিং রুক্ষ ওহান টিউলিপ হাংঝু

স্বয়ং প্রয়োগ করুন

উদাহরণ 3: নিচ এবং ডানদিকের স্ক্রোল মার্গিন সেট করা

প্রতিটি উপাদানের নিচ এবং ডানদিকে সেট করা যায় scroll-margin বৈশিষ্ট্য। হলস্বরূপ এবং উপরোক্ত স্ক্রোল বৈশিষ্ট্যটি দেখার জন্য পরবর্তী উপাদানটি স্ক্রোল করুন:

#container > div {
  scroll-margin: 0 10px 30px 0;
}





স্বয়ং প্রয়োগ করুন

CSS 语法

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

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

মান বর্ণনা
0 স্ক্রোল মার্গিন ০। ডিফল্ট মান。
length

px, pt, cm প্রভৃতি ইউনিটে স্ক্রোল মার্গিন নির্দিষ্ট করা হয়েছে। নেতিবাচক মান ব্যবহার করা যায়。

দেখুন:সিএসএস ইউনিট。
initial এই বৈশিষ্ট্যটি তার ডিফল্ট মানে নিয়ে নিতে হবে। দেখুন initial。
inherit এই বৈশিষ্ট্যটি পিতৃ তত্ত্বে থেকে উত্তরসূরী হয়। দেখুন inherit。

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

ডিফল্ট মান： 0
উত্তরসূরীতা： না
অ্যানিমেশন নির্মাণ: সমর্থন নেই। দেখুন:অ্যানিমেশন সংক্রান্ত বৈশিষ্ট্য。
সংস্করণ： CSS3
JavaScript 语法： object.style.scrollMargin="20px"

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

সংক্রান্ত পৃষ্ঠা

উল্লেখCSS scroll-margin-bottom এট্রিবিউট

উল্লেখCSS scroll-margin-left এট্রিবিউট

উল্লেখCSS scroll-margin-right এট্রিবিউট

উল্লেখCSS scroll-margin-top এট্রিবিউট

উল্লেখCSS scroll-snap-align এট্রিবিউট

উল্লেখCSS scroll-snap-type এট্রিবিউট