ఎలా సృష్టించాలి: స్వ‌యంగత స్క్రాల్‌బార్
CSS ఉప‌యోగించి స్వ‌యంగత స్క్రాల్‌బార్ సృష్టించ‌డానికి తెలుసుకోండి.
స్వ‌యంగత స్క్రాల్‌బార్
గమనిక‌లు:Firefox లేదా Edge 79 ముంది వ‌ర్షన్లు స్వ‌యంగత స్క్రాల్‌బార్‌ను మ‌ద్ద‌తించ‌వు.
కేవ‌లం ఎలా స్వ‌యంగత స్క్రాల్‌బార్ సృష్టించాలి
Chrome, Edge, Safari మరియు Opera అస్టాండర్డ్ కాదిన ప‌స్మూతి అంశాలను మ‌ద్ద‌తిస్తాయి. ::-webkit-scrollbar ప‌స్మూతి అంశం, ఇది మ‌నకు బ్రౌజ‌ర్ స్క్రాల్‌బార్ యొక్క క్షేత్రాన్ని మార్చ‌డానికి అనుమ‌తిస్తుంది.
ఈ ఉదాహరణలో, మేము 10px వెడల్పు కలిగిన స్క్రాల్‌బార్ సృష్టించాము ఇది గ్రే ట్రాక్/లేబ‌ల్ కలిగిన మరియు గ్రే స్లైడ‌ర్ కలిగిన ప్రక్రియ‌ను కలిగి ఉంటుంది:
/* వెడల్పు */
::-webkit-scrollbar {
width: 10px;
}
/* ట్రాక్ */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* స్లైడ‌ర్ */
::-webkit-scrollbar-thumb {
background: #888;
}
/* మౌస్ హోవర్ స్లైడ‌ర్ */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
ఈ ఉదాహరణలో, మేము షడ్యాంగిక ప్ర‌భావం కలిగిన స్క్రాల్‌బార్ సృష్టించాము:
ఉదాహరణ
/* వెడల్పు */
::-webkit-scrollbar {
width: 20px;
}
/* ట్రాక్ */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* స్లైడ‌ర్ */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
స్క్రాల్‌బార్ సెలెక్టర్
వెబ్‌కిట్ బ్రౌజ‌ర్‌కు కొరకు, మీరు ఈ ప‌స్మూతి అంశాలను ఉప‌యోగించవచ్చు బ్రౌజ‌ర్ స్క్రాల్‌బార్‌ను ప‌రిమితించ‌డానికి:
::-webkit-scrollbar |
స్క్రాల్‌బార్ యొక్క స్వ‌యంగతం. |
::-webkit-scrollbar-button |
స్క్రాల్‌బార్‌లోని బటన్లు (పైకి మరియు క్రిందికి వేయబడిన ఆరుద్రికాలు). |
::-webkit-scrollbar-thumb |
క్రియాశీలమైన స్క్రాల్‌బార్ స్లైడ‌ర్‌లు. |
::-webkit-scrollbar-track |
స్క్రాల్‌బార్ యొక్క ట్రాక్‌లు (ప్రొగ్రెస్‌బార్‌లు). |
::-webkit-scrollbar-track-piece |
ట్రాక్‌లో స్లైడ‌ర్ దొరక‌ని భాగం. |
::-webkit-scrollbar-corner |
స్క్రాల్‌బార్‌యొక్క కొనుగులు, అడ్డివెడల్పు స్క్రాల్‌బార్‌లు ఇక్కడ కలిసిపోతాయి. |
::-webkit-resizer |
出现在某些元素底角的可拖动调整大小手柄。 |
