CSS scroll-padding এট্রিবিউট

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

scroll-padding এই প্রতিশব্দ কোষ্ঠ থেকে সাবগত এলাকার আবদ্ধ স্থানের দূরত্ব নির্দিষ্ট করে。

এর মানে, যখন আপনি সরবরাহ থেকে থামেন, সরবরাহ দ্রুতগতিতে সংযোজিত হয় এবং কোষ্ঠ থেকে ফক্স সাবগত এলাকার আবদ্ধ স্থানের নির্দিষ্ট দূরত্বে থামে。

আবদ্ধ স্থান বলতে মানে হচ্ছে, যখন সাবগত এলাকা সরবরাহ থেকে থামে, তখন এটি কোষ্ঠকে যে স্থানে স্থায়ীভাবে থাকে তা。

scroll-padding এই প্রতিশব্দ নিম্নলিখিত প্রতিশব্দগুলির সংক্ষিপ্ত রূপ:

scroll-padding প্রতিশব্দের মান বিভিন্ন পদ্ধতিতে সংযোজিত হতে পারে:

যদি scroll-padding প্রতিশব্দ চারটি মান থাকে:

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

যদি scroll-padding প্রতিশব্দ তিনটি মান থাকে:

scroll-padding: 15px 30px 60px;
  • শীর্ষ দূরত্ব 15px
  • 左侧和右侧距离为 30px
  • নিচের দূরত্ব 60px

যদি scroll-padding প্রতিশব্দ দুই মান থাকে:

scroll-padding: 15px 30px;
  • শীর্ষ এবং নিচের দূরত্ব 15px
  • 左侧和右侧距离为 30px

如果 scroll-padding 属性有一个值：

scroll-padding: 10px;
  • 所有四个方向的距离均为 10px

要看到 scroll-padding 属性的效果，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-padding 和 scroll-snap-type 属性。

注意：在下面的例子中，为所有边设置了滚动内边距，但由于 scroll-snap-align 设置为 "start"，因此只有顶部边的滚动内边距改变了滚动行为。

实例

例子 1

设置从容器到吸附位置的滚动内边距为 20px：

div {
  scroll-padding: 20px;
}

স্বয়ং প্রয়াস করুন

例子 2：图片库

scroll-padding 属性可以在具有吸附行为的图片画廊中使用，以将图片推到固定元素下方：

#container {
  scroll-padding: 30px 0 0 0;
}
固定的顶部元素
বেইজিং রুক্ষ ওহান টিউলিপ হাংঝৌ

স্বয়ং প্রয়াস করুন

例子 3：设置底部和右侧的滚动内边距

scroll-padding গুণটি কনটেনারের নীচে এবং ডানদিকে একসাথে নির্ধারিত করা যায়। পরবর্তী এলিমেন্ট পর্যন্ত অনুসরণ করে এবং উপস্থাপনা দেখুন:

#container {
  scroll-padding: 0 10px 30px 0;
}





স্বয়ং প্রয়াস করুন

CSS গণিত

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

গুণপদ

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

px, pt, cm ইত্যাদি ইউনিটে সরবরাহ করা যায়

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

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

ডিফল্ট মান: auto
পৃথক্কৃতি: না
অ্যানিমেশন নির্মাণ: সমর্থিত নয়। দেখুন:অ্যানিমেশন-সংক্রান্ত গুণ。
সংস্করণ: CSS3
JavaScript গণিত: object.style.scrollPadding="20px"

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

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

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

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

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

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

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

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