CSS scroll-margin-inline-start প্রতিশব্দ

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

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

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

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

আটকা অবস্থান হল যখন আপনি স্ক্রোল করে থাকেন, সাব-এলিমেন্টগুলি কনটেনারে আটকা হয়ে থাকে এবং স্থানান্তরিত হয় এবং

প্রত্যহরণ:পরীক্ষা করুন: এই বৈশিষ্ট্যটি শুধুমাত্র scroll-snap-align

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

উদাহরণ

উদাহরণ 1

লিনার দিশা থেকে, আটকা অবস্থানের দূরত্ব থেকে স্ক্রোলযোগ্য কনটেনারের দূরত্ব নির্ধারণ করুন:

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

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

উদাহরণ 2

যখন <div> এলিমেন্টের writing-mode যখন বৈশিষ্ট্যমান vertical-rl থাকে, লিনার দিশা নিচের দিকে থাকে। ফলে, এলিমেন্টের প্রাথমিক স্থান ডানদিক থেকে শীর্ষের দিকে স্থানান্তরিত হয়:

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

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

উদাহরণ 3

যখন <div> এলিমেন্টের direction যখন বৈশিষ্ট্যমান রল থাকে, লিনার দিশা ডানের দিকে থাকে। ফলে, এলিমেন্টের প্রাথমিক স্থান ডানদিকে (প্রকৃতপক্ষে সর্বদা ডানদিকে থাকে, কিন্তু এখানের 'ডানদিক' হল ডিফল্ট ডাইরেকশন (ltr) এর ডানদিকের সাথে) সংশোধিত হয়:

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

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

CSS গঠনশৈলী

inset-inline-start: 0|value|initial|inherit;

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

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

px, pt, cm ইত্যাদির দ্বারা নির্দিষ্ট দূরত্বকে সংজ্ঞায়িত করুন। নেতিবাচক মানও অনুমোদিত।

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

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

ডিফল্ট মান: 0
উত্তরণযোগ্যতা: না
অ্যানিমেশন নির্মাণ: সমর্থিত না। দেখুন:অ্যানিমেশন-সংক্রান্ত বৈশিষ্ট্য。
সংস্করণ: CSS3
জেভাস্ক্রিপ্ট গঠনশৈলী: object.style.scrollMarginInlineStart="30px"

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

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

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

উল্লেখ:CSS scroll-snap-align প্রতিশব্দ

উল্লেখ:CSS scroll-snap-type প্রতিশব্দ

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