స్క్రోలింగ్ వెబ్ పేజీలు/పొడవైన పత్రాలను ఎడమ మరియు కుడి లేదా పైకి క్రిందికి వీక్షించడానికి వినియోగదారులను అనుమతిస్తుంది. కంటెంట్పై ఆధారపడి క్షితిజ సమాంతర మరియు నిలువు స్క్రోల్ బార్లను జోడించడం ద్వారా ఇది నిర్వహించబడుతుంది. ఎత్తు మరియు వెడల్పు వంటి స్క్రోల్ బార్ యొక్క కొలతలు డిఫాల్ట్గా సెట్ చేయబడతాయి. అయినప్పటికీ, వాటి అనుబంధిత జావాస్క్రిప్ట్ పద్ధతుల సహాయంతో వీటిని అనుకూలీకరించవచ్చు. వాటిని ఒకసారి డాక్యుమెంట్లో జోడించడం లేదా సెట్ చేయడం ద్వారా, అంతర్నిర్మిత “ని ఉపయోగించి వినియోగదారు వాటిని సులభంగా గుర్తించగలరు scrollTop() ', ఇంకా ' స్క్రోల్ లెఫ్ట్() ” పద్ధతులు.
ఈ పోస్ట్ j క్వెరీలో “స్క్రోల్లెఫ్ట్()” పద్ధతి యొక్క ప్రయోజనం మరియు కార్యాచరణను వివరిస్తుంది.
j క్వెరీలో “స్క్రోల్ లెఫ్ట్()” మెథడ్ అంటే ఏమిటి?
ది ' స్క్రోల్ లెఫ్ట్() ” పద్ధతి ప్రత్యేకంగా క్షితిజ సమాంతర స్క్రోల్ బార్ను పిక్సెల్లలో సెట్ చేయడానికి మరియు తిరిగి పొందేందుకు రూపొందించబడింది. ఇది ఎంచుకున్న HTML మూలకం స్క్రోల్ బార్ స్థానాన్ని గణిస్తుంది. ఇది ఎక్కువగా div, కంటైనర్ మరియు సెక్షన్ ఎలిమెంట్లకు వర్తించబడుతుంది.
సింటాక్స్ (క్షితిజ సమాంతర స్క్రోల్బార్ స్థానాన్ని సెట్ చేయండి)
$ ( సెలెక్టర్ ) .స్క్రోల్ లెఫ్ట్ ( స్థానం )
పై వాక్యనిర్మాణం పూర్ణాంక విలువను దాని ' స్థానం 'టార్గెటెడ్ సెలెక్టర్ యొక్క క్షితిజ సమాంతర స్క్రోల్ బార్ పొజిషన్ను సెట్ చేయడానికి ఆర్గ్యుమెంట్.
సింటాక్స్ (క్షితిజ సమాంతర స్క్రోల్బార్ స్థానాన్ని పొందండి)
$ ( సెలెక్టర్ ) .స్క్రోల్ లెఫ్ట్ ( )
ఈ సింటాక్స్ సెలెక్టర్ యొక్క “స్థానం” ఆర్గ్యుమెంట్ విలువను పిక్సెల్లలో అందిస్తుంది.
నిర్వచించిన పద్ధతిని ఆచరణాత్మకంగా ఉపయోగిస్తాము.
HTML కోడ్
ముందుగా, పేర్కొన్న HTML కోడ్ను చూడండి:
< విభాగం శైలి = 'ఎత్తు:150px; వెడల్పు: 200px ;మార్జిన్:ఆటో;సరిహద్దు:2px ఘన నలుపు; ఓవర్ఫ్లో: ఆటో;వైట్-స్పేస్: నౌరాప్;' >
< h2 > Linuxhintకి స్వాగతం ! h2 >
విభాగం >
< బటన్ > స్థానం సెట్ చేయండి బటన్ >
పై కోడ్ లైన్లలో:
- ది ' 'స్టైల్' అట్రిబ్యూట్ సహాయంతో అనుకూలీకరించిన HTML డాక్యుమెంట్లో 'ట్యాగ్ ఒక విభాగాన్ని కలిగి ఉంది.
- సృష్టించబడిన విభాగం లోపల, ' ” ట్యాగ్ ఉపశీర్షికను నిర్వచిస్తుంది.
- చివరగా, ' <బటన్> ” ట్యాగ్ బటన్ను జోడిస్తుంది.
గమనిక: ఈ పోస్ట్ యొక్క అన్ని ఉదాహరణలలో ఇచ్చిన HTML కోడ్ని అనుసరించండి.
ఉదాహరణ 1: స్క్రోల్బార్ (క్షితిజసమాంతర) స్థానాన్ని సెట్ చేయడానికి “స్క్రోల్లెఫ్ట్()” పద్ధతిని వర్తింపజేయడం
ఈ ఉదాహరణ స్క్రోల్బార్ను (క్షితిజ సమాంతరంగా) పేర్కొన్న స్థానంలో సెట్ చేయడానికి “స్క్రోల్లెఫ్ట్()” పద్ధతిని ఉపయోగిస్తుంది.
j క్వెరీ కోడ్
ఇచ్చిన j క్వెరీ కోడ్ని అనుసరించండి:
< స్క్రిప్ట్ src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > స్క్రిప్ట్ >< స్క్రిప్ట్ >
$ ( పత్రం ) .సిద్ధంగా ( ఫంక్షన్ ( ) {
$ ( 'బటన్' ) .క్లిక్ చేయండి ( ఫంక్షన్ ( ) {
$ ( 'విభాగం' ) .స్క్రోల్ లెఫ్ట్ ( యాభై ) ;
} ) ;
} ) ;
స్క్రిప్ట్ >
ఈ కోడ్ స్నిప్పెట్లో:
- ముందుగా, 'లో j క్వెరీ లైబ్రరీ యొక్క CDN పాత్ను పేర్కొనండి <స్క్రిప్ట్> 'దాని అధికారిక వెబ్సైట్ నుండి ట్యాగ్' https://jquery.com/ '' సహాయంతో src ' గుణం.
- తరువాత, రెండవ “