CSS స్క్రోల్-ప్యాడింగ్-బ్లాక్ అట్రిబ్యూట్

నిర్వచనం మరియు ఉపయోగం

scroll-padding-block ఈ స్పెసిఫికేషన బ్లాక్ దిశలో, కంటైనర్ నుండి కుమారులు సిక్కం స్థానం వరకు దూరం నిర్ణయించబడుతుంది.

ఇది మీరు స్క్రాల్ చేయడం మానించినప్పుడు, స్క్రాల్ త్వరగా సర్జించబడుతుంది మరియు బ్లాక్ దిశలో, సిక్కం స్థానం మరియు కంటైనర్ మధ్య తీసుకుని నిర్ణయించబడుతుంది.

బ్లాక్ దిశ అనేది, ప్రస్తుత పదం స్థానానికి తీసుకుని తదుపరి పదాన్ని ఇట్టే చేయడానికి ఉపయోగించబడే దిశ, ఇది CSS display: block; లేబుల్ (ఉదా <p> మరియు <div> లేబుల్) పేజీలో అనుసరించబడే అనుసరించబడే రీతి, ఇది రాతి భాషలకు అనుసరించబడుతుంది, ఉదా, మంగోలియన్ లో కొత్త పదం ఎడమ నుండి కుడికి ప్రారంభం అవుతుంది, అందువల్ల బ్లాక్ దిశ కూడా ఎడమ నుండి కుడికి ఉంటుంది, ఆంగ్ల పేజీలో అది డౌన్ బ్లాక్ దిశ ఉంటుంది. బ్లాక్ దిశ చేయడానికి CSS స్పెసిఫికేషనలో ఉపయోగించబడుతుంది: writing-mode నిర్వచించబడింది.

సిక్కం స్థానం అనేది, మీరు స్క్రాల్ చేయడం మానించినప్పుడు, కుమారులు కంటైనర్ లో సిక్కం స్థానం కలిగి ఉంటాయి అని కాదు.

గమనిక:ఈ స్పెసిఫికేషన బ్లాక్ దిశలో మాత్రమే ఉంటుంది:scroll-snap-align స్పెసిఫికేషన సెట్ చేయబడినప్పుడు 'start' లేదా 'end' చేయబడితే చూడబడుతుంది.

scroll-padding-block ఈ స్పెసిఫికేషన క్రింది స్పెసిఫికేషనలో సరళీకరించబడింది:

scroll-padding-block స్పెసిఫికేషనలో విలువలను వివిధ రీతులు సెట్ చేయవచ్చు:

అయితే scroll-padding-block స్పెసిఫికేషనలో రెండు విలువలు ఉంటే:

scroll-padding-block: 10px 50px;
  • ప్రారంభ దూరం 10px
  • ముగింపు దూరం 50px

అయితే scroll-padding-block స్పెసిఫికేషనలో ఒక విలువ ఉంటే:

scroll-padding-block: 10px;
  • ప్రారంభం మరియు ముగింపు దూరం అన్ని 10px

చూడటానికి వచ్చింది scroll-padding-block అంశం ప్రభావం, కుమారులు అంశం లో సెట్ చేయాలి scroll-snap-align 属性，并在父元素上设置 scroll-padding-block మరియు scroll-snap-type 属性。

CSS 的 scroll-padding-block మరియు scroll-padding-inline 属性与 CSS 属性 CSS స్క్రోల్-ప్యాడింగ్-టాప్ అట్రిబ్యూట్,scroll-padding-bottom,scroll-padding-left మరియు scroll-padding-right మరియు scroll-padding-block మరియు scroll-padding-inline లక్షణం బ్లాక్ దిశ మరియు ఇన్లైన్ దిశలపై ఆధారపడి ఉంటుంది.

ఉదాహరణ

ఉదాహరణ 1

బ్లాక్ దిశలో, కంటైనరును స్థిర స్థానానికి వెళ్లే 20px గా స్క్రాల్ అంతరాన్ని సెట్ చేయండి:

div {
  scroll-padding-block: 20px;
}

స్వయంగా ప్రయోగించండి

ఉదాహరణ 2: చిత్రాల కొలక్షణం

scroll-padding-block లక్షణం చిత్రాలను స్థిర లక్షణాల క్రిందకు కల్పించడానికి కంటైనర్లలో సబ్స్క్రిబ్ ప్రవర్తనను ఉపయోగించవచ్చు:

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

స్వయంగా ప్రయోగించండి

ఉదాహరణ 3

కంటైనర్ ఎల్లా ప్రాతిపదికన ఉన్నప్పుడు writing-mode లక్షణం విలువను vertical-rl గా సెట్ చేసినప్పుడు, బ్లాక్ దిశలో కంటైనర్ మరియు పిల్ల లక్షణాల ప్రారంభ స్థానం మొదటి నుండి కుడికి కదులుతుంది, మరియు ముగింపు స్థానం కింది నుండి ఎడమకు కదులుతుంది. ఇది స్క్రాల్ సబ్స్క్రిబ్ ప్రవర్తనను ప్రభావితం చేస్తుంది మరియు ఇతర లక్షణాలను ప్రభావితం చేస్తుంది. scroll-padding-block లక్షణం పనిచేయడం:

#container {
  scroll-padding-block: 20px 0;
  writing-mode: vertical-rl;
}

స్వయంగా ప్రయోగించండి

సిఎస్ఎస్ సంకేతాలు

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

లక్షణ విలువ

విలువ వివరణ
auto అప్రమేయ విలువ.
length

px, pt, cm వంటి అక్షరాంశాలలో scroll-padding-block నిర్దేశించండి.

నిషేధించబడిన మానికలు. దయచేసి ఈ కి సంబంధించి చూడండి:సిఎస్ఎస్ యూనిట్స్.
% కంటైనర్ వెడల్పు శాతంలో సరఫరా ప్రాంతాన్ని నిర్దేశించండి.
initial ఈ లక్షణాన్ని అప్రమేయ విలువకు సెట్ చేయండి. దయచేసి ఈ కి సంబంధించి చూడండి: initial.
inherit ఈ లక్షణాన్ని తన పేర్పడుతున్న ఎల్లా ప్రాతిపదికన పారంపర్యం చేసుకుంటుంది. దయచేసి ఈ కి సంబంధించి చూడండి: inherit.

సాంకేతిక వివరాలు

అప్రమేయ విలువ: auto
పారంపర్యత లక్షణం: ఏ
అనిమేషన్ తయారీ: మద్దతు లేదు. దయచేసి ఈ కి సంబంధించి చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు.
వెర్షన్: సిఎస్ఎస్ 3
జావాస్క్రిప్ట్ సంకేతాలు: object.style.scrollPaddingBlock="20px"

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ నిర్దేశిస్తుంది.

క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
69.0 79.0 68.0 15.0 56.0

相关页面

参考：CSS స్క్రోల్-ప్యాడింగ్-బ్లాక్-ఎండ్ అట్రిబ్యూట్

参考：CSS స్క్రోల్-ప్యాడింగ్-బ్లాక్-స్టార్ట్ అట్రిబ్యూట్

参考：CSS స్క్రోల్-స్నాప్-అలయిన్ అట్రిబ్యూట్

参考：CSS స్క్రోల్-స్నాప్-టైప్ అట్రిబ్యూట్

参考：CSS వ్రాయింగ్-మోడ్ అట్రిబ్యూట్