CSS scroll-snap-align এটিবিউট

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

scroll-snap-align প্রতিষ্ঠাতা এলাকায় সংস্থায়ত প্রতিটি পদার্থ, আপনি স্ক্রোল করার সময় স্ট্যাপল থেকে স্ন্যাপ করে থাকবে

রোলিং স্ন্যাপ এক্সিওয়াইড করতে, পুত্র এলাকায় সংস্থায়ত করতে হবে scroll-snap-align প্রতিষ্ঠাতা এলাকায় সংস্থায়ত scroll-snap-type বৈশিষ্ট্য

প্রতিমান

উদাহরণ 1

যখন ব্যবহারকারী সরণ থামে, সরণকারী অঞ্চলের মধ্যবর্তী উপাদানটি কেন্দ্রে সরণ অবস্থান করায়:

div {
  scroll-snap-align: center;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

উদাহরণ 2: চিত্র সংকলন

scroll-snap-align এই বৈশিষ্ট্যটি চিত্র সংকলন সরণ ব্যবহারের জন্য অত্যন্ত উপযুক্ত। এখানে, সরণের দিশা অনুভূমিক এবং অবস্থান নির্ধারণ করা হয় মধ্যবর্তী। যখন ব্যবহারকারী সরণ টাকিয়ে রাখে, সরণকারী অঞ্চলের মধ্যবর্তী চিত্রটি সরণ অবস্থান করে। একটি চিত্রকে ক্লিক করে এবং সরণটির ডান-বাম আরোহণদন্ড ব্যবহার করে তাদের সরণ করুন:

#container > img {
  scroll-snap-align: none center;
}
বেইজিং রুক্ষী ওয়ুহান টিউলিপ হাংঝৌ

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

জঙ্গল পাহাড়ে অল্লেগ্রি ব্রিজ, ক্যামেরা ধারণকারী মানুষ, কিন্কো টেরে

উদাহরণ 3: ব্লক দিশায় অস্থির রক্ষণ করার অবস্থান ভাগে ভাগে নির্ধারণ করা

অস্থির রক্ষণ করা হলেscroll-snap-align বৈশিষ্ট্যটি ব্লক দিশায়ও উপাদানের প্রারম্ভিক অবস্থান নির্ধারণ করা যেতে পারে：

#container > div {
  scroll-snap-align: start none;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

CSS 语法

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

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

মান বর্ণনা
none কোনো সরণ অবস্থান না। ডিফল্ট মান。
start x এবং y অক্ষের ওপর, উপাদানের ভাবগত দিকে সরণ অবস্থান করে。
end x এবং y অক্ষের ওপর, উপাদানের শেষের দিকে সরণ অবস্থান করে。
center x এবং y অক্ষের ওপর, উপাদানের কেন্দ্রে সরণ অবস্থান করে。
block inline দ্বিমূলক সিন্তাক্সিস। প্রথম মূল্যটি ব্লক দিশায় অবস্থান নির্ধারণ করে, দ্বিতীয় মূল্যটি লাইনার দিশায় অবস্থান নির্ধারণ করে。
initial এই বৈশিষ্ট্যটি তার ডিফল্ট মানে নেয়। দেখুন initial。
inherit এই বৈশিষ্ট্যটি তার পিতৃত্ব বৈশিষ্ট্য থেকে উত্তরসূরী হয়। দেখুন inherit。

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

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

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

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

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