CSS scroll-margin అట్రిబ్యూట్

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

scroll-margin ఈ సవరణ సప్పోల్ స్థానం మరియు కంటెయినర్ మధ్య దూరాన్ని నిర్ణయిస్తుంది.

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

సబ్-అంశం సప్పోల్ స్థానం అనేది, సబ్-అంశం స్టాప్ స్క్రోలింగ్ జరగాలిగానే, కంటెయినర్ లో సప్పోల్ స్థానానికి చేరుతుంది అని కాదు.

scroll-margin ఈ సవరణ క్లాసులను లఘురూపంలో సవరిస్తుంది:

scroll-margin సవరణల విలువలను వివిధ రీతులుగా అమర్చవచ్చు:

స్క్రోల్-మార్జిన్ సవరణకు నాలుగు విలువలు ఉన్నప్పుడు:

scroll-margin: 15px 30px 60px 90px;
  • పై దూరం 15px
  • కుడి దూరం 30px
  • మూలన దూరం 60px
  • ఎడమ దూరం 90px

స్క్రోల్-మార్జిన్ సవరణకు మూడు విలువలు ఉన్నప్పుడు:

scroll-margin: 15px 30px 60px;
  • పై దూరం 15px
  • 左右两侧距离为 30px
  • మూలన దూరం 60px

స్క్రోల్-మార్జిన్ సవరణకు రెండు విలువలు ఉన్నప్పుడు:

scroll-margin: 15px 30px;
  • 顶部和底部距离为 15px
  • 左右两侧距离为 30px

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

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

要看到 scroll-margin 属性的效果，必须在子元素上设置 scroll-margin 和 scroll-snap-align 属性，并在父元素上设置 scroll-snap-type లక్షణం

మున్నటి గమనిక:ఈ ఉదాహరణలో, అన్ని వైపులను స్క్రాల్ మార్జిన్ను సెట్ చేసినప్పటికీ, కారణం కాబట్టి scroll-snap-align లక్షణం "start" గా సెట్ చేయబడినందున, మాత్రమే పైన స్క్రాల్ మార్జిన్ మారింది మరియు స్క్రాల్ ప్రవర్తనం మారింది.

ఉదాహరణ

ఉదాహరణ 1

అంశం మరియు కంటైనర్ మధ్య స్క్రాల్ మార్జిన్ను 20px గా సెట్ చేయండి:

div {
  scroll-margin: 20px;
}

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

ఉదాహరణ 2: చిత్రాల సమూహం

scroll-margin లక్షణం సమూహాలలో ఉపయోగించబడవచ్చు. ఇక్కడ,scroll-margin వినియోగదారుకు ఎడమ వైపు మరొక చిత్రాన్ని చూయగలిగే విధంగా చేయండి. మొదటి చిత్రాన్ని స్క్రాల్ చేసి ప్రభావాన్ని చూడండి:

#container > img {
  scroll-margin: 0 0 0 30px;
}
బీజింగ్ డాన్సర్ వుహాన్ టులిప్ హాంగ్జోఉ

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

ఉదాహరణ 3: పైన మరియు కుడిప్రక్కన స్క్రాల్ మార్జిన్ సెట్ చేయండి

అంశం పైన మరియు కుడిప్రక్కన సెట్ చేయవచ్చు scroll-margin లక్షణం. హరిత మరియు ఉన్నత స్క్రాల్ నుండి తదుపరి అంశాన్ని చూడండి ప్రభావం ఉంటుంది:

#container > div {
  scroll-margin: 0 10px 30px 0;
}





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

CSS సంకేతాలు

scroll-margin: 0|value|initial|inherit;

లక్షణ విలువ

విలువ వివరణ
0 స్క్రాల్ మార్జిన్ కొలత కన్నా ఎక్కువ కాదు. అప్రమేయ విలువ.
length

px, pt, cm వంటి విలువలతో స్క్రాల్ మార్జిన్ నిర్దేశించండి. నిష్పక్షపాతం ఉంటుంది.

దయచేసి ఈ కు మీద చూడండి:CSS యూనిట్స్.
initial ఈ లక్షణాన్ని అప్రమేయ విలువకు సెట్ చేయండి. చూడండి: initial.
inherit ఈ లక్షణాన్ని తన పేర్పడిన అంశం నుండి పారంపర్యం చేసుకుంది. చూడండి: inherit.

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

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

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

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

క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
69.0 79.0 90.0 14.1 56.0

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

సూచనలు:CSS స్క్రోల్-మార్జిన్-బాటమ్ అట్రిబ్యూట్

సూచనలు:CSS స్క్రోల్-మార్జిన్-లెఫ్ట్ అట్రిబ్యూట్

సూచనలు:CSS స్క్రోల్-మార్జిన్-రైట్ అట్రిబ్యూట్

సూచనలు:CSS స్క్రోల్-మార్జిన్-టాప్ అట్రిబ్యూట్

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

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