బ్రౌసర్ స్క్రిప్ట్ ట్యూటోరియల్ స్క్రోల్ స్పై

స్క్రోల్స్పీ

స్క్రోల్స్పీ ఉపయోగిస్తుంది అనుసరించిస్క్రాల్స్థానం స్వయంచాలకంగా నేవిగేషన్ జాబితాలో లింకులను నవీకరిస్తుంది.

如何创建 Scrollspy

下例展示如何创建 Scrollspy：

实例

</body>

ప్రయోగించండి

ఈ విధంగా వివరించండి data-bs-spy="scroll" స్క్రోల్ ఏరియా ఉపయోగపడే అంశానికి జోడించండి (సాధారణంగా స్క్రోల్ ఏరియా ఉంటుంది) <body> అంశం).

ఆప్షనల్ అంశం చేర్చండి data-bs-target అంతరం ప్రత్యేకత ప్రత్యేకంగా ఇది ఐడి లేదా నేవిగేషన్ బార్ యొక్క క్లాస్ పేరు వాల్యూ గా ఉంటుంది (.navbar) ఇది నేవిగేషన్ మరియు స్క్రోల్ ఏరియా అనేది కలిసిపోయేటట్లు చేయడానికి ఉద్దేశించబడింది.

గమనించండి, స్క్రోల్ అబ్జెక్ట్ అనేది నేవిగేషన్ లిస్ట్ లోని లింకుల ఐడికి సరిపోయేది ఉండాలి (<div id="section1"> సరికొలుపు <a href="#section1">)

ఆప్షనల్ డాటా-బిఎస్-ఆఫ్సెట్ అంతరం ప్రత్యేకత ప్రత్యేకంగా ప్రారంభించబడిన స్థానం నుండి టాప్ నుండి పైకి ఆఫ్ సెట్ పిక్సెల్స్ ను నిర్ణయించే అంతరం ప్రత్యేకత. నేవిగేషన్ బార్లోని లింకులు స్క్రోల్ అబ్జెక్ట్లకు కొనసాగుతున్నప్పుడు సక్రియ స్థితి ముందుగా మారినట్లు భావించినప్పుడు ఇది ఉపయోగపడుతుంది. డిఫాల్ట్ విలువ 10 పిక్సెల్స్.

సరసమార్పణ అవసరండాటా-బిఎస్-స్పై="scroll" అనే అంశం కలిగిన మెటీరియల్స్ కు CSS అవసరం స్థానం అంతరం విలువను "relative" గా సెట్ చేయడం వలన సరిగా పని చేస్తుంది.