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

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

scroll-snap-type మీరు స్క్రాల్‌ని ఆగించినప్పుడు ఎలాగే ఎలిమెంట్ ఫోకస్‌కు అటుకుతుంది మరియు అటుకువుట దిశ నిర్ణయిస్తుంది అని స్పష్టం చేస్తుంది అంశం.

要实现滚动吸附行为，必须在父元素上设置 scroll-snap-type 属性，并在子元素上设置 scroll-snap-align 属性。

实例

例子 1

在 x 轴上设置滚动吸附功能：

#container {
  scroll-snap-type: x mandatory;
}

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

例子 2：在 x 轴和 y 轴上设置吸附行为

x అక్షం మరియు y అక్షంలో అద్దంబంబం ప్రభావాన్ని అమర్చండి. scroll-snap-type లక్షణం:

#container > div {
  scroll-snap-type: both mandatory;
}





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

ఉదాహరణ 3: సమీపత్వం కలిగిన అద్దంబంబం ప్రభావం

x అక్షం మరియు y అక్షంలో సమీపత్వం ప్రభావం కలిగిన scroll-snap-type లక్షణం. ఈ లక్షణానికి విలువను వాడినప్పుడు, స్క్రాల్ కార్యకలాపం రెండు అంశాల మధ్య నిలిచినప్పుడు అద్దంబంబం జరగదు:

#container > div {
  scroll-snap-type: both proximity;
}





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

CSS సంకేతాలు

scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;

లక్షణానికి విలువ

విలువ వివరణ
none స్క్రాల్ అద్దంబంబం ప్రభావం లేదు. అప్రమేయ విలువ.
x x అక్షంలో స్క్రాల్ అద్దంబంబం ప్రభావాన్ని అమర్చండి.
y y అక్షంలో స్క్రాల్ అద్దంబంబం ప్రభావాన్ని అమర్చండి.
block బ్లాక్ దిశలో స్క్రాల్ అద్దంబంబం ప్రభావాన్ని అమర్చండి.
inline పద్ధతి దిశలో స్క్రాల్ అద్దంబంబం ప్రభావాన్ని అమర్చండి.
both x అక్షం మరియు y అక్షంలో స్క్రాల్ అద్దంబంబం ప్రభావాన్ని అమర్చండి.
mandatory స్క్రాల్ కార్యకలాపం పూర్తి అయిన తర్వాత, స్క్రాల్ స్వయంచాలకంగా అద్దంబంబం పాయింట్లకు కదులుతుంది.
proximity

మాన్డటరీ వంటి, కానీ దాని కంటే తక్కువగా సరళం.

స్క్రాల్ కార్యకలాపం పూర్తి అయిన తర్వాత, స్క్రాల్ స్వయంచాలకంగా అద్దంబంబం పాయింట్లకు కదులుతుంది, కానీ అద్దంబంబం పాయింట్ల మధ్య ఒక ప్రాంతంలో అద్దంబంబం ప్రభావం లేదు.

బ్రౌజర్ పారామీటర్లకు ఆధారపడి ఉంటుంది.
initial ఈ లక్షణాన్ని అప్రమేయ విలువకు అమర్చండి. చూడండి: initial.
inherit ఈ లక్షణాన్ని తన పేర్పడు మూల అంశం నుండి పారంపర్యం చేసుకుంది. చూడండి: inherit.

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

అప్రమేయ విలువ: none
పారంపర్యం: ఏ
అనిమేషన్ నిర్మాణం: మద్దతు లేదు. చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు.
వెర్షన్: CSS3
జావాస్క్రిప్ట్ సంకేతాలు: object.style.scrollSnapType="x mandatory"

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

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

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

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

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