CSS scroll-margin-inline অপারেটর

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

scroll-margin-inline এটি ইনলাইন দিশায়, আটস্থানকরণ স্থান এবং কনটেনারের মধ্যের দূরত্ব নির্দিষ্ট করে

এর মানে হল, আপনি যখন স্ক্রোলিং থেকে থামেন, স্ক্রোলিং দ্রুত সংযোজিত হবে এবং ইনলাইন দিশায় নির্দিষ্ট দূরত্বে থামবে, যা আটস্থানকরণ স্থান এবং কনটেনারের মধ্যে অবস্থিত

ইনলাইন দিশা বলতে মানে হল আগত অক্ষরটি বর্তমান অক্ষরের উপর নির্ভর করে লাইনের কোন দিকে লাগানো হবে, এটি হলো CSS display: inline; এর ট্যাগ (যেমন <a> এবং <strong> ট্যাগ) যা টেক্সটের সাথে সাথে সাজানো হয়। ইনলাইন দিশা লিখন ভাষা অনুযায়ী হয়, যেমন আরবির নতুন অক্ষরগুলি ডান থেকে বাঁদিকে সাজানো হয়, তাই ইনলাইন দিশা ডান থেকে বাঁদিকে হবে, এবং ইংরেজি পৃষ্ঠার ইনলাইন দিশা বাঁদিক থেকে ডানদিকে হবে। ইনলাইন দিশা CSS অ্যাট্রিবিউটের মাধ্যমে নির্ধারিত হয় direction এবং writing-mode সংজ্ঞা

আটস্থানকরণ স্থান বলতে মানে হল সাব-ইলেমেন্ট যখন স্ক্রোলিং থেকে থামে, তখন কনটেনারের মধ্যে আটস্থানকরণ করা স্থান

scroll-margin-inline এটি নিম্নলিখিত অ্যাট্রিবিউটের সংক্ষিপ্ত অ্যাট্রিবিউট

scroll-margin-inline অ্যাট্রিবিউটের মান বিভিন্ন পদ্ধতিতে সেট করা যেতে পারে:

যদি scroll-margin-inline অ্যাট্রিবিউট দুটি মান হয়:

scroll-margin-inline: 20px 70px;
  • শুরুর দূরত্ব 20px
  • শেষের দূরত্ব 70px

যদি scroll-margin-inline অ্যাট্রিবিউট একটি মান হয়:

scroll-margin-inline: 20px;
  • শুরু এবং শেষের দূরত্ব একইভাবে 20px

দেখার জন্য scroll-margin-inline অ্যাট্রিবিউটের প্রভাব, সাব-ইলেমেন্টের উপর সেট করা উচিত scroll-margin-inline এবং scroll-snap-align বৈশিষ্ট্য, এবং পারদর্শী সম্প্রসারণে সম্পৃক্ত করা হয় scroll-snap-type বৈশিষ্ট্য

CSS-এর scroll-margin-inline এবং scroll-margin-block বৈশিষ্ট্যটি সিএসএস বৈশিষ্ট্য CSS scroll-margin-top অপারেটর、scroll-margin-bottom、scroll-margin-left এবং scroll-margin-right অত্যন্ত সমান, কিন্তু scroll-margin-block এবং scroll-margin-inline বৈশিষ্ট্য বলবৎ হয়, যা ব্লক দিশা এবং ইনলাইন দিশা নির্ভর করে।

উদাহরণ

উদাহরণ 1

ইনলাইন দিশায়, আকৃতির স্থান থেকে সরল স্ক্রোল কনটেনার পর্যন্ত দূরত্ব সম্পৃক্ত করা হয়:

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

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

উদাহরণ 2

যখন <div> ইলেমেন্টের writing-mode যখন scroll-margin-inline-এর বৈশিষ্ট্যটি vertical-rl-এ সম্পৃক্ত করা হয়, তখন ইনলাইন দিশা নিচ থেকে উপর দিকে হয়। ফলস্বরূপ, ইলেমেন্টের প্রথম স্থানটি বাম থেকে উপর দিকে স্থানান্তরিত হয় এবং ইলেমেন্টের শেষ স্থানটি ডান থেকে নীচ দিকে স্থানান্তরিত হয়। এটি অন্যান্য কিছুও প্রভাবিত করে: scroll-margin-inline বৈশিষ্ট্য:

div {
  scroll-margin-inline: 20px 0;
  writing-mode: vertical-rl;
}

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

উদাহরণ 3

যখন <div> ইলেমেন্টের direction যখন scroll-margin-inline-এর বৈশিষ্ট্যটি rtl-এ সম্পৃক্ত করা হয়, তখন ইনলাইন দিশা ডান থেকে বাম দিকে হয়। ফলস্বরূপ, ইলেমেন্টের প্রথম স্থানটি বাম থেকে ডান দিকে স্থানান্তরিত হয় এবং ইলেমেন্টের শেষ স্থানটি ডান থেকে বাম দিকে স্থানান্তরিত হয়। এটি অন্যান্য কিছুও প্রভাবিত করে: scroll-margin-inline বৈশিষ্ট্য:

div {
  scroll-margin-inline: 0 20px;
  direction: rtl;
}

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

CSS বিন্যাস

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

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

মান বর্ণনা
0 ডিফল্ট। ইলেমেন্টের ডিফল্ট scroll-margin-inline দূরত্ব
length

px, pt, cm ইত্যাদির ইউনিটে দূরত্ব সংজ্ঞায়িত করা হয়। নেতিবাচক মানগুলি সমর্থন করা হয়。

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

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

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

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

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

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

উল্লেখ:CSS scroll-margin-inline-end অপারেটর

উল্লেখ:CSS scroll-margin-inline-start অপারেটর

উল্লেখ:CSS scroll-snap-align অপারেটর

উল্লেখ:CSS scroll-snap-type অপারেটর

উল্লেখ:CSS writing-mode এসপ্যাট্রি