js පිටුවේ උස සොයා ගන්නේ කෙසේද? JavaScript සහ jQuery හි "තිර විභේදනය" සහ "බ්‍රවුසර් කවුළු ප්රමාණය" තීරණය කරන්නේ කෙසේද. පිටු අනුචලනය වෙනස් කරන්න: scrollTo, scrollBy, scrollIntoView
වෙබ් අඩවි සඳහා අතුරුමුහුණත් සංවර්ධනය කිරීමේදී, ඔබට බොහෝ විට JavaScript භාවිතා කිරීමට සිදුවේ. ඇත්ත වශයෙන්ම, මෙය නරක ය, නමුත් සමහර අවස්ථාවන්හිදී CSS හි සියල්ල සම්පූර්ණයෙන්ම ක්රියාත්මක කිරීම සරලවම කළ නොහැකිය.
වැඩිදුර හැසිරවීම් සඳහා බ්රවුසර කවුළුවේ පළල හෝ උස තීරණය කිරීමේදී මට නිතර නිතර අවශ්‍යතාවය පැන නගී. මෙම මාතෘකාව පිළිබඳ සියලු තොරතුරු කැපීම යටතේ.
එය ප්රයෝජනවත් විය හැක්කේ කොතැනින්ද?
මම සියලු දෙනා වෙනුවෙන් කතා නොකරමි, නමුත් සෑම දෙයක්ම පිරිසිදු JS වලින් ලියා ඇති Textpattern සමඟ සියලු වර්ගවල ගැලරි, ස්ලයිඩර් ආදිය ඒකාබද්ධ කිරීමේදී එය මට ප්රයෝජනවත් වේ. JS සමඟ තදින් බැඳී ඇති දේවල් දුර්ලභ ය, නමුත් ඒවා තවමත් සිදු වේ, මෙම සටහන දිස්වන්නේ එබැවිනි.
ඔබට එය ආකාර දෙකකින් අර්ථ දැක්විය හැක: JS හෝ jQuery.
පිරිසිදු JS සමඟ පළල හෝ උස නිර්ණය කිරීම
සෑම නවීන බ්‍රවුසරයක්ම පාහේ JavaScript එන්ජිමක් ඇති බැවින් මෙය වඩාත් කැමති ක්‍රමයයි. ජංගම බ්‍රව්සර් පවා JS සමඟ වැඩ කිරීමට ඉගෙන ගෙන ඇත.
ඇත්ත වශයෙන්ම, පරිශීලකයා විසින්ම බ්රවුසරයේ JS සැකසුම් අක්රිය කිරීමේ හැකියාවක් ඇත, නමුත් සෑම වෙබ් අඩවියක්ම පාහේ JS මත ක්රියා කරන යම් ආකාරයක විසඳුමක් භාවිතා කරන බැවින් එවැනි “අමුතු පුද්ගලයන්” එතරම් නොමැති බව මට පෙනේ.
නිර්වචනය කිරීමට JS හි තිර ප්රමාණයන්, ඔබ කාර්යයන් භාවිතා කළ යුතුය:
Screen.width //Screen width screen.height //Screen height
මෙන්න විකාර භාවිත උදාහරණයක්:
ඔබ පිටුවේ සමහර අංග ස්ථානගත කිරීමට මෙය භාවිතා කරන්නේ නම්, හොඳම විසඳුම වන්නේ තිර ප්රමාණයන් භාවිතා කිරීම නොවේ, නමුත් බ්රවුසර කවුළු ප්රමාණය. JS හි එය මේ ආකාරයට සිදු කරයි:
Document.body.clientWidth //Browser Width document.body.clientHeight //Browser Height
ඒ අනුව, මෙන්න තේරුමක් නැති භාවිත අවස්ථාවක්:
jQuery සමඟ බ්රවුසරයේ ප්රමාණය
පුද්ගලිකව, මම පහත විස්තර කර ඇති ක්රමය භාවිතා කරමි. මෙම ක්රමය ක්රියාත්මක වන්නේ ඔබ මීට පෙර ඔබේ වෙබ් අඩවියේ jQuery පුස්තකාලය ඇතුළත් කර ඇත්නම් පමණි. මා විසින් කළ යුතු සියලුම අඩවි වල, මෙම පුස්තකාලය තථ්‍ය ප්‍රමිතියයි.
අපගේ කාර්යය සඳහා jQuery භාවිතා කිරීමට, අපි කේතය භාවිතා කළ යුතුය:
$(කවුළුව).පළල(); //බ්රවුසරයේ පළල $(කවුළුව).උස(); // බ්රවුසරයේ උස
අවසාන වශයෙන්, මම කියන්නට කැමතියි JS සහ jQuery නොමැතිව පොදුවේ හෝ අර්ධ වශයෙන් කළ හැකි නම්, ඔබ කළ යුත්තේ මෙයයි.
සමාජ මත කියන්න ජාල
එය කුමක් සදහාද? උදාහරණයක් ලෙස, අප සතුව අලංකාර අඩවි පිරිසැලසුමක් ඇති අතර එහි සියලු අලංකාරය 1600 සිට 1200 දක්වා විභේදනයකින් පමණක් පෙන්වයි. උදාහරණයක් ලෙස, එය ඉතා විශාල අලංකාර ශීර්ෂයක් ඇත. 768 න් 1024 විභේදනයකින් පුද්ගලයෙකු වෙබ් අඩවියට පිවිසෙන්නේ නම් කුමක් සිදුවේද? ඔව්, තොප්පිය පමණක් පෙනෙනු ඇත. හොඳ නැහැ? සමහරවිට. එසේනම් බ්රවුසරයේ / තිරයේ උසින්, ශීර්ෂය සරලව කපා හැර, මෙනුව සහ වෙබ් අඩවියේ ඉතිරි කොටස යන ආකාරයේ දෙයක් නොකරන්නේ මන්ද? වාව්, ඔබට අවශ්ය දේ.
ඇත්ත වශයෙන්ම, මම ප්රායෝගිකව හමු වූ එක් උදාහරණයක් විස්තර කළෙමි (පින්තූරය බලන්න). මම ගැටළුව සරලව විසඳුවා - javascript හරහා. නැත්නම් jQuery හරහා, මට මතක නැහැ. මම මේ ක්රම දෙකම විස්තර කරන්නම්.
පළමුවෙන්ම, අර්ථ දැක්වීම අතර වෙනසක් ඇති කළ යුතුය තිර විභේදනය" සහ " බ්රවුසර කවුළු ප්රමාණය"(සමහර ලිපිවල සිදුවීම් ඇති බැවින් - සමහර ක්රම ප්‍රශංසා කරන ලදී, අනෙක් ඒවා යෝජනා කරන ලදී, එක් අවස්ථාවක ඔවුන් බ්‍රව්සර් විභේදනය මැනියද, අනෙක - මොනිටරයේ විභේදනය).
ඔබට වඩා වැදගත් දේ ආරම්භයේ සිටම ඔබ තීරණය කළ යුතුය. ශීර්ෂයක් සහිත එම උදාහරණයේ දී, මම තිරයේ විභේදනය (මොනිටරය) මගින් මඟ පෙන්වනු ලැබුවා: සියල්ලට පසු, වෙබ් අඩවිය ලස්සනයි, බ්රවුසර කවුළුව අතින් අඩු කර ඇත්නම්, එය බැලීමේදී එහි බ්‍රව්සරය සම්පූර්ණ තිරයට පුළුල් කිරීමට ඉඩ දෙන්න. මෙම වෙබ් අඩවිය (ඔවුන් සඳහා කිසිවක් නැත, ඔබට තේරෙනවාද - සංස්.) නමුත්, උදාහරණයක් ලෙස, jQuery ලයිට්බොක්ස් ගැලරියේ විස්තාරිත රූපය සකස් කිරීම සඳහා, මම බ්රවුසරයේ පළල සහ උස භාවිතා කළෙමි.
අපි තෝරාගත් පසු, අපි කේතය ලියන්නෙමු, එය වෙබ් අඩවියේ ශීර්ෂයේ කළ හැකිය. පළමුව, අවධානය යොමු කළ උදාහරණයක් තිර විභේදනය.
පේළි 3-6 - pure javascript, lines 7-11 - jQuery උදාහරණය. පළල සහ උස තීරණය කිරීම සඳහා javascript ක්රම screen.width සහ screen.height භාවිතා කරයි. රේඛා මගින් සිදු කරන දේ පැහැදිලිය: පළමු ස්ක්‍රිප්ටය මාර්ගය ලියයි අතිරේක ගොනුව CSS, සහ අනෙකුත් ID එකතුව සහිත බ්ලොක් සඳහා css ගුණය "පසුබිම්-ස්ථානය" සකසයි.
අපි දෙවන උදාහරණය දෙස බලමු, නමුත් එය බ්රවුසරයේ විභේදනය කෙරෙහි අවධානය යොමු කරනු ඇත. හැම දෙයක්ම එක හා සමානයි, ක්රම වෙනස් වී ඇත.
එබැවින්, උදාහරණ දෙකකින්, කෙටි දළ විශ්ලේෂණයක් - කුමක් සඳහා භාවිතා කළ යුතුද:
- තිරය.පළල. තිරයේ පළල (මොනිටරය) සඳහන් කරයි.
- තිරය.උස. තිරයේ උස (මොනිටරය) සඳහන් කරයි.
- document.body.clientWidth. බ්රවුසරයේ පළල නියම කරයි.
- document.body.clientHeight. බ්රවුසරයේ උස සඳහන් කරයි.
- $(කවුළුව).පළල(). බ්රවුසරයේ පළල සඳහන් කරයි, නමුත් jQuery පවතින විට පමණි.
- $(කවුළුව).උස(). බ්රවුසරයේ උස සඳහන් කරයි, නමුත් jQuery පවතින විට පමණි.
ඔබ jQuery භාවිතා කරන්නේ නම්, 3 ට වඩා 5 වඩාත් සුදුසු වන අතර 4 ට වඩා 6 - ඒවා සරලව කෙටි බව පැහැදිලිය. අහ් සහ එසේ - රසය සහ වර්ණය මත.
තිර සඳහා jQuery හි නිශ්චිත උස සහ පළල ඇතුළත් කිරීම් සම්බන්ධයෙන්, මම අවංකවම ඒවා නොදනිමි. න්‍යායට අනුව, පේළි 5-6 ක් වැනි ඉදිකිරීමක් තිබිය යුතුය, නමුත් කෙසේ හෝ මම එය ප්රායෝගිකව හමු වී නැත, ඒවා නොපවතින බව මට පෙනේ. ඔව්, සහ එය අවශ්ය නොවේ, screen.width යනු තරමක් කෙටි ඉදිකිරීමකි, එය ප්රමාණවත්ය.
ඔව්, $(document).width() ද ඇත - HTML ලේඛනයේ පළල නිර්වචනය කරයි. ප්රායෝගිකව භාවිතා කරන්න - කෙසේ හෝ සැක සහිතයි. කවුද දන්නේ - ඔබ බෙදා ගන්නේ නම් මම සතුටු වෙමි.
අදට එච්චරයි! සති අන්තය දක්වා රැඳී සිට විශාල වශයෙන් බාබකියු වෙත යන්න! (ඔබ යම් දෙයක් සමඟ අසනීප වී නොමැති නම්, සමහරක් වැනි - දළ වශයෙන්. එඩ්.). වාසනාව!
ආයුබෝවන්! මෙම පාඩමේ මාතෘකාව දිගටම කරගෙන යාමේදී, වෙබ් පිටුවක් අනුචලනය කිරීම සහ බ්රවුසරයේ ප්රමාණය හැසිරවීම වැනි ගැටළුවක් අපි සලකා බලමු. බ්රවුසරයේ පළල සොයා ගන්නේ කෙසේද? JavaScript භාවිතයෙන් වෙබ් පිටුවක් අනුචලනය කරන්නේ කෙසේද? මෙම ප්‍රශ්න වලට පිළිතුරු මෙම පාඩමෙන් ඔබට සොයාගත හැකි යැයි මම සිතමි.
බ්රවුසර කවුළුවේ දෘශ්‍ය කොටසෙහි පළල/උස
මූලද්‍රව්‍යයක් සඳහා වන clientWidth/height ගුණ යනු කවුළුවේ දෘශ්‍ය ප්‍රදේශයේ පළල/උස පමණි.
window.innerWidth/Height නොවේ
IE8- හැර අනෙකුත් සියලුම බ්‍රව්සර් වලට window.innerWidth/innerHeight ගුණාංග සඳහා සහය දැක්විය හැකි බව සටහන් කළ යුතුය. ඔවුන් ඉතිරි කරයි වත්මන් ප්රමාණයකවුළුව.
කුමක්ද වෙනස? ඔබ අහන්න. එය නිසැකවම කුඩා නමුත් ඉතා වැදගත් වේ.
clientWidth/Height ගුණාංග, අනුචලන තීරුවක් තිබේ නම්, සම්පූර්ණ ලේඛනය සඳහා ලබා ගත හැකි පළල/උස හරියටම එය ආපසු ලබා දෙනු ඇත, සහ window.innerWidth/Height එහි පැවැත්ම නොසලකා හරිනු ඇත.
පිටුවේ දකුණු පැත්ත අනුචලන තීරුවකින් අල්ලාගෙන තිබේ නම්, මෙම පේළි විවිධ දේවල් පෙන්වනු ඇත:
ඇඟවීම (window.innerWidth); // සම්පූර්ණ කවුළු පළල ඇඟවීම (document.documentElement.clientWidth); // පළල අඩු අනුචලනය
සාමාන්‍යයෙන් අපි උනන්දු වන්නේ කවුළුවේ පවතින පළල ගැන පමණි, උදාහරණයක් ලෙස, යමක් ඇඳීමට, එනම් අනුචලන තීරුව අඩු කරන්න. එබැවින්, documentElement.clientWidth බොහෝ විට භාවිතා වේ.
අනුචලනය ඇතුළුව වෙබ් පිටු පළල/උස
ඔව්, න්‍යායාත්මකව, පිටුවේ දෘශ්‍යමාන කොටස documentElement.clientWidth/Height වේ, නමුත් අනුචලන තීරුව ඇතුළුව සම්පූර්ණ ප්රමාණය, සාදෘශ්‍යයෙන්, documentElement.scrollWidth/scrollHeight වේ.
සියලුම සාමාන්ය මූලද්රව්ය සඳහා මෙය සත්ය වේ.
නමුත් මෙම ගුණාංග සහිත පිටුවක් සඳහා, අනුචලනය කිරීමේදී හෝ නොමැති විට ගැටළුවක් ඇතිවිය හැකිය. මෙම අවස්ථාවේ දී, ඔවුන් නිවැරදිව ක්රියා නොකරයි. තුළ බව කිව යුතුය ක්‍රෝම් බ්‍රව්සර්/ සෆාරි සහ ඔපෙරා අනුචලන තීරුවක් නොමැති විට, මෙම නඩුවේ documentElement.scrollHeight හි අගය documentElement.clientHeight ට වඩා අඩු විය හැකිය, එය ඇත්තෙන්ම තාර්කික නොවන දෙයක් ලෙස පෙනේ.
විශේෂයෙන්ම documentElement සඳහා මෙම ගැටළුව ඇතිවිය හැක.
නමුත් අනුචලනය සැලකිල්ලට ගනිමින් පිටුවේ ප්රමාණය විශ්වාසදායක ලෙස තීරණය කිරීම සඳහා, ඔබට මෙම ගුණාංග කිහිපයෙන් උපරිමය ගත හැකිය:
Var scrollVisota = Math.max(document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); අනතුරු ඇඟවීම ("අනුචලන සහිත උස:" + scrollVisota);
වත්මන් අනුචලනය ලබා ගැනීම
සාමාන්ය මූලද්‍රව්‍යයක වත්මන් අනුචලනය තිබේ නම්, ඔබට එය scrollLeft/scrollTop වෙතින් ලබා ගත හැක.
පිටුව ගැන කුමක් කිව හැකිද?
කාරණය නම්, බොහෝ බ්‍රවුසරයන් documentElement.scrollLeft/Top වෙත ඉල්ලීමක් නිවැරදිව හසුරුවනු ඇත, නමුත් Safari/Chrome/Opera හි ඔබට document.body භාවිත කිරීමට අවශ්ය වන දෝෂ තිබේ.
හොඳයි, මෙම ගැටලුව සම්පූර්ණයෙන් මඟහරවා ගැනීමට, ඔබට window.pageXOffset/pageYOffset ගුණාංග භාවිතා කළ හැක:
ඇඟවීම ("වත්මන් අනුචලන ඉහළට: " + window.pageYOffset); අනතුරු ඇඟවීම ("වත්මන් වම් අනුචලනය: " + window.pageXOffset);
මේ සියල්ල ගුණාංග වේ:
- IE8 මගින් සහය නොදක්වයි-
- ඒවා කියවිය හැකි නමුත් වෙනස් කළ නොහැක.
IE8 සැලකිල්ලක් නොදක්වන්නේ නම්, මෙම ගුණාංග භාවිතා කරන්න.
IE8 සලකා බලන විට හරස් බ්‍රවුසර් ප්‍රභේදය documentElement මත ප්‍රභේදයක් සපයයි:
var scrollTop = window.pageYOffset || document.documentElement.scrollTop; අනතුරු ඇඟවීම ("වත්මන් අනුචලනය:" + scrollTop);
පිටු අනුචලනය වෙනස් කරන්න: scrollTo, scrollBy, scrollIntoView
ජාවාස්ක්‍රිප්ට් භාවිතයෙන් පිටුවක් අනුචලනය කිරීම සඳහා, එහි සියලුම මූලද්රව්ය සම්පූර්ණයෙන්ම පූරණය කළ යුතුය.
සාමාන්ය මූලද්රව්ය මත, scrollTop/scrollLeft ප්‍රතිපත්තිමය වශයෙන් වෙනස් කළ හැකි අතර, මූලද්‍රව්‍යය අනුචලනය වේ.
පේජ් එකත් එක්ක එහෙම කරන්න කවුරුත් ඔයාට කරදර කරන්නේ නෑ. ක්‍රෝම්/සෆාරි/ඔපෙරා හැර අනෙකුත් සියලුම බ්‍රව්සර් වල, ලේඛනය.documentElement.scrollTop සැකසීමෙන් අනුචලනය කළ හැකි අතර, එම බ්‍රව්සර්වල, document.body.scrollTop මේ සඳහා භාවිතා කළ යුතුය. තවද සෑම දෙයක්ම විශිෂ්ට ලෙස ක්රියා කරනු ඇත.
නමුත් තවත්, විශ්වීය විසඳුමක් ඇත - විශේෂ පිටු අනුචලන ක්රම window.scrollBy(x,y) සහ window.scrollTo(pageX,pageY).
- scrollBy(x,y) ක්රමය එහි වත්මන් ඛණ්ඩාංකවලට සාපේක්ෂව පිටුව අනුචලනය කරයි.
- scrollTo(pageX,pageY) ක්රමය මඟින් සම්පූර්ණ ලේඛනයට සාපේක්ෂව නිශ්චිත ඛණ්ඩාංක වෙත පිටුව අනුචලනය කරයි. එය scrollLeft/scrollTop ගුණාංග සැකසීමට සමාන වේ. ලේඛනයේ ආරම්භයට අනුචලනය කිරීමට, ඔබ ඛණ්ඩාංක (0,0) සඳහන් කළ යුතුය.
අනුචලනයIntoView
elem.scrollIntoView(top) ක්රමය මූලද්රව්ය මත කැඳවා පිටුව අනුචලනය කළ යුතු අතර එමඟින් ඉහළ පරාමිතිය සත්ය නම් මූලද්‍රව්‍යය ඉහළින් ඇති අතර ඉහළ නම් පිළිවෙළින් පහළින් පිහිටා ඇත. එපමණක් නොව, මෙම ඉහළ පරාමිතිය නියම කර නොමැති නම්, එය සත්‍යයට සමාන වේ.
අනුචලනය තහනම් කරන්න
"අනුචලනය කළ නොහැකි" ලේඛනයක් සෑදීමට අවශ්ය වන අවස්ථා තිබේ. උදාහරණයක් ලෙස, ලේඛනයට ඉහලින් විශාල සංවාද කොටුවක් පෙන්වන විට - අමුත්තන්ට මෙම කවුළුව හරහා අනුචලනය කළ හැකි වන පරිදි, නමුත් ලේඛනයම නොවේ.
පිටු අනුචලනය අක්රිය කිරීම සඳහා, document.body.style.overflow = "සැඟවුණු" දේපල සැකසීමට ප්රමාණවත් වේ.
document.body වෙනුවට, අනුචලනයෙන් අබල කිරීමට අවශ්ය ඕනෑම අංගයක් තිබිය හැක.
නමුත් මෙම ක්‍රමයේ අවාසිය නම් එම අනුචලන තීරුව ම අතුරුදහන් වීමයි. එය යම් පළලක් අල්ලාගෙන තිබේ නම්, දැන්, ඒ අනුව, මෙම පළල නිදහස් වනු ඇත, සහ පිටු අන්තර්ගතය පුළුල් වනු ඇත, පෙළ "පනින්න", සියලු නිදහස් ඉඩ ලබා ගනී.
ප්රතිපල
- කවුළුවේ දෘශ්‍ය කොටසෙහි මානයන් ලබා ගැනීමට, දේපල භාවිතා කරන්න: document.documentElement.clientWidth/Height
- අනුචලනය සලකා බැලීමේදී පිටු මානයන් ලබා ගැනීමට, භාවිතා කරන්න: var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement. සේවාලාභියාගේ උස);
මෙම පාඩමේදී, අපි කවුළු වස්තුවේ ගුණාංග දෙස බලමු, එමඟින් ඔබට බ්‍රව්සර් කවුළුවේ සේවාදායක ප්‍රදේශයේ මානයන් (අභ්‍යන්තර පළල සහ අභ්‍යන්තර උස), කවුළුවේ මානයන් (පිටත පළල සහ පිටත උස), එහි පිහිටීම සාපේක්ෂව ලබා ගත හැකිය. පරිශීලකයාගේ තිරයේ ඉහළ වම් කෙළවර (screenLeft සහ screenTop) සහ ස්ථාන අනුචලන තීරු (pageXOffset සහ pageYOffset).
innerWidth සහ innerHeight ගුණ
ඒවා නිර්මාණය කර ඇත්තේ බ්‍රව්සර් කවුළුවේ දෘශ්‍ය සේවාදායක ප්‍රදේශයේ මානයන් ලබා ගැනීම සඳහා ය. එම. innerWidth සහ innerHeight ගුණාංග HTML ලේඛනය පෙන්වන ප්‍රදේශයේ පළල සහ උස ලබා ගැනීම සඳහා වේ. මෙම ගුණාංග කියවීමට පමණක් වන අතර පික්සල් අගයන් ලබා දෙයි.
උදාහරණයක් ලෙස, බ්‍රව්සර් කවුළුවේ දෘශ්‍ය සේවාදායක ප්‍රදේශයේ උස සහ පළල ලබා ගැනීමට:
Viewport පළල (widthContenArea):
දෘශ්‍ය දර්ශන තොටේ පළල (උස ContenArea):
පිටත පළල සහ පිටත උස ගුණාංග
ඔවුන් සම්පූර්ණ බ්රවුසර කවුළුවෙහි මානයන් ලබා ගැනීමට සැලසුම් කර ඇත, i.e. මෙවලම් තීරු, අනුචලන තීරු, තත්ව තීරුව, කවුළු මායිම් ආදිය ඇතුළුව. පිටත පළල සහ පිටත උස ගුණාංග කියවීමට පමණක් වන අතර, පිළිවෙලින්, කවුළුවේ පළල සහ උස පික්සල වලින් ලබා දෙයි.
උදාහරණයක් ලෙස, බ්‍රව්සර් කවුළුවේ උස සහ පළල ලබා ගැනීමට:
බ්‍රව්සර් කවුළු පළල (පළල කවුළුව):
බ්‍රව්සර් කවුළු උස (උස කවුළුව):
screenLeft (screenX) සහ screenTop (screenY) ගුණාංග
පරිශීලකයාගේ තිරයේ ඉහළ වම් කෙළවරට සාපේක්ෂව බ්රවුසර කවුළුවේ හෝ ලේඛනයේ ඉහළ වම් කෙළවරේ ඛණ්ඩාංක ලබා ගැනීමට ඒවා නිර්මාණය කර ඇත.
කෙසේ වෙතත්, screenLeft සහ screenTop ගුණාංග Internet Explorer හි ක්රියා කරයි, සහ screenX සහ screenY ගුණාංග Mozilia Firefox හි ක්රියා කරයි. Chrome, Safari, සහ සමාන බ්‍රව්සර්වල, ඔබට screenLeft සහ screenTop ගුණාංග දෙකම මෙන්ම screenX සහ screenY ගුණාංගද භාවිතා කළ හැක.
මෙම ගුණාංග භාවිතා කරන විට, සමහර බ්‍රව්සර් ලේඛනයේ ඉහළ වම් කෙළවරේ ඛණ්ඩාංකය සහ සමහර බ්‍රව්සර් කවුළුවේ ඉහළ වම් කෙළවරේ ඛණ්ඩාංකය ආපසු ලබා දිය හැකි බව ඔබ සැලකිල්ලට ගත යුතුය. Screenleft (screenX) සහ screenTop (screenY) ගුණාංග කියවීමට පමණක් වන අතර පික්සල වලින් තිරයේ වම් කෙළවරේ සිට තිරස් සහ සිරස් දුර පිළිවෙලින් ආපසු ලබා දේ.
උදාහරණයක් ලෙස, තිරයේ ඉහළ වම් කෙළවරට සාපේක්ෂව වත්මන් බ්‍රව්සර් කවුළුවේ (ලේඛනය) වම් කෙළවරේ x සහ y ඛණ්ඩාංක පණිවිඩයක් ලෙස පෙන්වමු:
ඛණ්ඩාංක සොයා ගන්න
pageXOffset (scrollX) සහ pageYOffset (scrollX) ගුණාංග
ඒවා නිර්මාණය කර ඇත්තේ කවුළුවේ ඉහළ වම් කෙළවරට සාපේක්ෂව ලේඛනය තිරස් අතට (pageXOffset) හෝ සිරස් අතට (pageYOffset) අනුචලනය කර ඇති පික්සල ගණන ලබා ගැනීමටය. scrollX සහ scrollY ගුණාංග පිළිවෙලින් pageXOffset සහ pageYOffset ගුණාංගවලට සමාන වේ. මෙම ගුණාංග කියවීමට පමණි.
උදාහරණයක් ලෙස, ලේඛනය තිරස් (pageXOffset) සහ සිරස් (pageYOffset) දිශාවන්හි අනුචලනය කරන ලද පික්සල ගණන පණිවිඩයේ සංදර්ශන කරන්න.
අනුචලන තීරු ස්ථාන පරීක්ෂා කරන්න
