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

నిర్వహణ మరియు వినియోగం

scroll-padding-block-end అంతర్భాగం ద్వారా బ్లాక్ దిశలో, కంటెయినర్ ముగింపు నుండి చిల్లర స్థానానికి దూరం నిర్వహించబడుతుంది.

మీరు స్క్రోల్ స్టాప్ చేసినప్పుడు, స్క్రోల్ ఫాస్ట్ సాధిస్తుంది మరియు బ్లాక్ దిశలో, అద్దెపద్ధతి మరియు కంటెయినర్ మధ్య పేర్కొన్న దూరంలో స్టాప్ చేస్తుంది.

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

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。

注意：此属性仅在块方向的 scroll-snap-align 属性设置为 'end' 时才起作用。

要看到 scroll-padding-block-end 属性的效果，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-padding-block-end మరియు scroll-snap-type లక్షణం.

ఇన్స్టాన్స్

ఉదాహరణ 1

కంటైనర్ యొక్క మూల ప్రక్రియ నుండి స్థిర స్థానానికి బ్లాక్ దిశలో స్క్రాల్ లోపల పడన మొత్తాన్ని 20px గా సెట్ చేయండి:

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

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

ఉదాహరణ 2: చిత్రశాల

సబ్స్పైన్ ప్రవర్తనకు ఉన్న చిత్రశాలలో, ఈ లక్షణాన్ని ఉపయోగించవచ్చు: scroll-padding-block-end లక్షణం చిత్రాన్ని స్థిర ప్రక్రియకు ముందుకు జరిపే పని చేస్తుంది:

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

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

ఉదాహరణ 3

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

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

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

CSS సంకేతాలు

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

లక్షణ విలువ

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

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

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

సంబంధిత పేజీలు

పరికళ్పనాలు:CSS స్క్రోల్-స్నాప్-అలైన్ అట్రిబ్యూట్

పరికళ్పనాలు:CSS స్క్రోల్-స్నాప్-టైప్ అట్రిబ్యూట్

పరికళ్పనాలు:CSS వ్రాయింగ్-మోడ్ అట్రిబ్యూట్