CSS ఓవర్‌స్క్రాల్‌బీహేవియర్ అట్రిబ్యూట్

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

overscroll-behavior అధిక స్క్రోలింగ్ ఫీడ్‌బాక్‌ను (overscroll affordance) లేదా స్క్రోల్ చేయడానికి ప్రయత్నించినప్పుడు ఎలిమెంట్‌కు స్క్రోల్ చేయడానికి ప్రయత్నించడానికి సంబంధించిన స్క్రోల్ చేయడానికి అనుమతిస్తుంది.

స్క్రోల్ లింక్‌: ఒక ఎలిమెంట్‌పై అధిక స్క్రోల్ చేసినప్పుడు, పైబడిన ఎలిమెంట్‌కు స్క్రోల్ ప్రవర్తనను కలిగిస్తుంది. ఇది డిఫాల్ట్ ప్రవర్తన.

అధిక స్క్రాలింగ్ ఫీడ్‌బాక్‌: స్క్రోల్ పరిమితిని దాటి స్క్రోల్ చేయడానికి ప్రయత్నించినప్పుడు, వినియోగదారికి అందించే ఫీడ్‌బాక్‌. ఉదాహరణకు, మొబైల్ పరికరంపై పేజీ పైకి స్క్రోల్ చేయడానికి ప్రయత్నించినప్పుడు, సాధారణంగా దృశ్యపరమైన ఫీడ్‌బాక్‌ను చూపించి పేజీని రీఫ్రెష్ చేస్తారు.

overscroll-behavior ఈ గుణం క్రింది గుణాల సంక్షిప్త రూపం ఉంది:

overscroll-behavior గుణాల విలువలను వివిధ రీతులుగా అమర్చవచ్చు:

ఇక్కడ overscroll-behavior గుణం రెండు విలువలను కలిగి ఉంటే:

overscroll-behavior: none contain;
  • x దిశ: మించిన స్క్రోలింగ్ ప్రవర్తన లేదు
  • y దిశ: స్క్రోలింగ్ లైన్ లేదు, కానీ మించిన స్క్రోలింగ్ ఫీడ్‌బ్యాక్‌ను అనుమతిస్తాయి

ఇక్కడ overscroll-behavior గుణం ఒక విలువను కలిగి ఉంటే:

overscroll-behavior: contain;
  • x మరియు y దిశలు: స్క్రోలింగ్ లైన్ లేదు, కానీ మించిన స్క్రోలింగ్ ఫీడ్‌బ్యాక్‌ను అనుమతిస్తాయి

ఉదాహరణ

ఉదాహరణ 1

కింది స్క్రోలింగ్ లైన్‌ని మూసివేయండి:

#yellowDiv {
  overscroll-behavior: contain;
}

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

ఉదాహరణ 2: ద్వివిలువ సంకేతాలు:

ఈ గుణాన్ని అమర్చండి: overscroll-behavior గుణాల విలువ అమర్చబడింది: auto noneకానీ y దిశలో స్క్రోలింగ్ లైన్‌ను అనుమతించదు:

#pinkDiv {
  overscroll-behavior: auto none;
}

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

CSS సంకేతాలు

overscroll-behavior: auto|contain|none|initial|inherit;

గుణాల విలువ

విలువ వివరణ
auto స్క్రోలింగ్ లైన్ మరియు మించిన స్క్రోలింగ్ ఫీడ్‌బ్యాక్ ప్రవర్తనను అనుమతిస్తుంది. అప్రమేయ విలువ.
contain మించిన స్క్రోలింగ్ ఫీడ్‌బ్యాక్ ప్రవర్తనను అనుమతిస్తుంది, కానీ స్క్రోలింగ్ లైన్‌ను అనుమతించదు.
none మించిన స్క్రోలింగ్ ఫీడ్‌బ్యాక్ లేదా స్క్రోలింగ్ లైన్ ప్రవర్తనను అనుమతించబడదు.
initial ఈ గుణాన్ని అప్రమేయ విలువకు అంతర్భాగం చేసుకుంది. చూడండి: initial.
inherit తన పేర్వ మూలకం నుండి ఈ గుణాన్ని పారంపర్యం చేసుకుంది. చూడండి: inherit.

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

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

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

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

క్రోమ్ ఎడ్జ్ ఫైర్‌ఫాక్స్ సఫారీ ఓపెరా
63.0 18.0 * 59.0 16.0 50.0

* మైక్రోసాఫ్ట్ ఎడ్జ్‌లో గుణముల విలువ 'none' 'contain'గా పరిగణించబడుతుంది, ఇది సరైనది కాదు.

相关页面

పరికల్పనలు:CSS ఓవర్‌స్క్రాల్‌బీహేవియర్‌ఎక్స్ అట్రిబ్యూట్

పరికల్పనలు:CSS ఓవర్‌స్క్రాల్‌బీహేవియర్‌వై అట్రిబ్యూట్

పరికల్పనలు:CSS స్క్రోల్‌బీహేవియర్ అట్రిబ్యూట్

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

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

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