බ්‍රව්සර් කවුළුවට සාපේක්ෂව HTML මූලද්‍රව්‍යයක පිහිටීම (X, Y) ලබා ගන්න

1596

මම වැනි HTML අංග X හා Y තත්ත්වය ලබා ගැනීමට ආකාරය දැන ගැනීමට අවශ්ය imgසහ divබ්රවුසරය ඇති වින්ඩෝව සාපේක්ෂව JavaScript දී.

javascript  html  css  dom  position 
— ජැක්
source
135
කුමක් සඳහාද?
— ඇන්තනි ඩබ්ලිව් ජෝන්ස්
5
මම 5,6,7 හි විෂමතාවන් සහිත සියලුම බ්‍රව්සර්වල ක්‍රියා කරන මෙම කේත පේළි 7 භාවිතා කර ඇත (මට කිසිදු ප්‍රොබොම් එකක් තිබීම මතක නැත ... ලේඛ වර්ගය විය හැකිය) ... quirksmode.org/js/findpos. html සහ මම අවුරුදු ගාණක් තිස්සේ ඒක ගොඩක් පාවිච්චි කළා. යම් යම් අඩුපාඩු ඇත්නම් ඒවා පෙන්වා දිය හැකිය.
— ජයපාල් චන්ද්‍රන්
104
Nt ඇන්තනි ඩබ්ලිව් ජෝන්ස්, ඔබට අනුකම්පා විරහිත සතුටක් අවශ්‍ය යැයි මම සිතමි, නමුත් සෑම විටම නිශ්චිතව දක්වා නොමැති විට, OP යනු වඩාත් පොදු අවස්ථාව හෝ බ්‍රව්සරයේ කවුළු ඛණ්ඩාංක වෙත යොමු වන බව පැහැදිලිය.
— මෝටස්
8
OteMote, නැත, එය එතරම් පැහැදිලිව පෙනෙන්නට නැත. අනුමානය, ආත්මීයත්වය සහ ව්‍යාජ ප්‍රවාදයන් පසෙකට දමන්න. එය දර්ශනපත්‍රයට හෝ පිටුවේ ඉහළට සාපේක්ෂව විය හැකිය (aka document.documentElement).
— ඇන්ඩ්‍රේ ෆිගියිරෙඩෝ
17
වඩාත්ම සාමාන්‍යයට පෙරනිමිය අනුමාන කිරීමක් නොවේ, එය තාර්කික ප්‍රගතියකි, එබැවින් එය කවුළුවට සාපේක්ෂව වනු ඇත, නැතහොත් “පිටුවේ ඉහළ” යන්න ඔබ තැබූ යෙදුම විය හැකිය. ක්‍රීඩා න්‍යාය තුළ, එය ෂෙලිං පොයින්ට් ලෙස හැඳින්වෙන සංකල්පයක් ලෙස කේතනය කර ඇත. ඔබ වඩාත් පොදු අවස්ථාව අදහස් නොකරන විට සඳහන් කිරීමට වග බලා ගන්න.
— මෝටස්

Answers:

1823

නිවැරදි ප්‍රවේශය භාවිතා කිරීම element.getBoundingClientRect():

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් ඔබ සැලකිලිමත් වීමට ඉඩ ඇති තාක් කල් මේ සඳහා සහය ලබා දී ඇති අතර එය අවසානයේ CSSOM දසුන් තුළ ප්‍රමිතිකරණය කරන ලදි . අනෙක් සියලුම බ්‍රව්සර් බොහෝ කලකට පෙර එය සම්මත කර ගත්හ .

මෙය සම්මත නොවන නමුත් සමහර බ්‍රව්සර් උස සහ පළල ගුණාංග නැවත ලබා දෙයි. පැරණි බ්‍රව්සරයේ ගැළපුම ගැන ඔබ කනස්සල්ලට පත්ව සිටී නම්, ප්‍රශස්ත ලෙස පහත් ක්‍රියාවට නැංවීම සඳහා මෙම පිළිතුරේ සංශෝධන පරීක්ෂා කරන්න.

ආපසු ලබා දුන් අගයන් element.getBoundingClientRect()දර්ශනපත්‍රයට සාපේක්ෂව වේ. ඔබට එය වෙනත් මූලද්‍රව්‍යයකට සාපේක්ෂව අවශ්‍ය නම්, එක් සෘජුකෝණාස්රයක් අනෙකාගෙන් අඩු කරන්න:

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');
— ඇන්ඩි ඊ
source
145
JS ඛණ්ඩාංක පිළිබඳ ඉතා රසවත් ලිපියක් . මෙම ලිපිය SO හි කොතැනකවත් සඳහන් නොවේ, එය එසේ විය යුතුය ..
— e2-e4
7
ක්‍රියා නොකරයි ... ශරීරයේ 8px ආන්තිකය හේතුවෙන් එය පික්සල් 8 ක් සිරස් අතට හා තිරස් අතට විහිදේ. මීව්ගේ විසඳුම පරිපූර්ණව ක්රියා කරයි. ඔබට අවශ්‍ය නම් ගැටලුව නිරූපණය කිරීමට මට කුඩා පරීක්ෂණයක් තිබේ.
— CpnCrunch
4
ඇත්තටම, මම හිතන්නේ එය ඔබට ඇත්ත වශයෙන්ම අවශ්‍ය වන්නේ කුමක්ද යන්න මතය. ප්‍රශ්නය ටිකක් අපැහැදිලි ය. දර්ශන පුවරුවට සාපේක්ෂව හෝ ශරීර මූලද්‍රව්‍යයට සාපේක්ෂව ඔබට අවශ්‍ය නම් ඔබේ පිළිතුර නිවැරදියි, නමුත් මූලද්‍රව්‍යයේ නිරපේක්ෂ පිහිටීම ඔබට අවශ්‍ය අවස්ථාවන්හිදී එය ඔබට උදව් නොකරයි (බොහෝ දෙනෙකුට අවශ්‍ය වන්නේ එයයි) . ඔබ '-scrollLeft' සහ '-scrollTop' බිටු ඉවත් නොකරන්නේ නම් මිව්ගේ පිළිතුර ඔබට එය ලබා නොදේ.
— CpnCrunch
4
PCpnCrunch: ඔබ දැන් අදහස් කරන දේ මට පෙනේ; ඔබ මගේ පිළිතුරේ අවසාන කොටස ගැන සඳහන් කරන බව මට වැටහුණේ නැත. ශරීරයට ආන්තිකයක් ඇති විට, එහි මායිම් පෙට්ටිය එක් එක් පැත්තේ ඇති පික්සෙල් ගණනින් කපා හරිනු ඇත. එවැනි අවස්ථාවකදී, ඔබ ශරීර ඛණ්ඩාංක වලින් ගණනය කළ ආන්තික විලාසය අඩු කළ යුතුය. CSS යළි පිහිටුවීම් මඟින් ආන්තිකය ඉවත් කරන බව සඳහන් කිරීම වටී <body>.
— ඇන්ඩි ඊ
3
element.getBoundingClientRect().topposition: fixediOS (iPhone 8) හි මූලද්‍රව්‍යයක් නාභිගත ආදාන අංගයක් අඩංගු නම් සහ අථත්‍ය යතුරුපුවරුව ලිස්සා ගොස් ඇත්නම් නිවැරදි ඉහළ ඕෆ්සෙට් ලබා නොදේ . උදාහරණයක් ලෙස, කවුළුවේ ඉහළ සිට සත්‍ය ඕෆ්සෙට් 200px නම්, එය 420px ලෙස වාර්තා කරයි, එහිදී 220px යනු අතථ්‍ය යතුරුපුවරුවේ උස වේ. ඔබ මූලද්‍රව්‍ය position: absoluteපිහිටුවා එය ස්ථාවර කර ඇති ආකාරයටම ස්ථානගත කරන්නේ නම්, එවිට ඔබට නිවැරදි 200px ලැබෙනු ඇත. මම මේකට විසඳුමක් දන්නේ නැහැ.
— ජැනිස් එල්මරිස්
329

මූලද්‍රව්‍යයක් සඳහා නිවැරදි ඕෆ්සෙට් ලබා ගැනීම සඳහා පුස්තකාල යම් දුරකට යයි.
මෙන්න මම උත්සාහ කළ සෑම තත්වයකදීම කාර්යය කරන සරල කාර්යයකි.

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;
— meouw
source
14
වෙනස් කරන්න: el = el.parentNode to: el = el.offsetParent; දැන් එය කැදැලි අයිෆ්‍රේම් සඳහා වැඩ කරන බවක් පෙනේ ... මම හිතන්නේ ඔබ අදහස් කළේ එයද?
— ඇඩම්
4
මෙම විසඳුම අසම්පූර්ණයි. Div න මායිමක් බෙදීමට උත්සාහ කර කිහිප වතාවක් කූඩු කරන්න. ෆයර්ෆොක්ස් (2-5) හි ඕනෑම අනුවාදයක එය මායිම් පළල (ය) මගින් අක්‍රිය වනු ඇත (ප්‍රමිති අනුකූලතා ප්‍රකාරයේදී පවා).
— ck_
3
El.totalOffsetLeft සහ totalOffsetTop ශ්‍රිතය වැනි පිරිසිදු ක්‍රමයක් නොමැතිද? jQuery නිසැකවම මෙම විකල්පය ඇත, නමුත් මේ සඳහා නිල ක්‍රමයක් නොමැති වීම ලැජ්ජාවකි, අපට DOM4 බලා සිටිය යුතුද? මම HTML5 කැන්වස් යෙදුමක් සාදමින් සිටිමි, එබැවින් හොඳම විසඳුම වනුයේ අයිෆ්‍රේම් එකක කැන්වස් මූලද්‍රව්‍යය ඇතුළත් කිරීමයි, එවිට අපි මූලද්‍රව්‍යය මත ක්ලික් කරන විට clientX සහ clientY සමඟ සැබෑ ඛණ්ඩාංක ලබා ගත හැකිය.
— baptx
1
ඉතින්, ඇඩම් සහ මීව්, ඔබ කියන්නේ පළමු කේත වාරණය වැරදියි කියාද? එසේනම් එය සම්පූර්ණයෙන්ම ඉවත් නොකරන්නේ ඇයි? (මෙම ප්‍රශ්නය වසර ගණනාවක් තිස්සේ බොහෝ නරඹන්නන් දැක ඇත; ඒවා වැරදියි නම් ඒවා ඉවත් කිරීම සතුටක් විය හැකිද?)
— අර්ජන්
2
@baptx: මෙය ප්‍රමාද පිළිතුරක් බව මම දනිමි, නමුත් ඔබගේ අදහස ඉක්මනින් මා දුටුවේ නැත. වඩා ප්‍රමිති අනුකූල විකල්පයක් සඳහා මගේ පිළිතුර පහතින් බලන්න - ඔබට නැවත වැටීමේ කේතය පවා අවශ්‍ය නොවේ, මන්ද බ්‍රව්සර් එයට දීර් time කාලයක් තිස්සේ සහාය ලබා දී ඇත.
— ඇන්ඩි ඊ
245

මෙය මට වැඩ කළේය (වැඩිම ඡන්දය දුන් පිළිතුරෙන් වෙනස් කරන ලදි):

function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

මෙය භාවිතා කිරීමෙන් අපට ඇමතිය හැකිය

getOffset(element).left

හෝ

getOffset(element).top
— ඇඩම් ග්‍රාන්ට්
source
1
divCss භාවිතා කර කේන්ද්‍රගත කර ඇති මූලද්‍රව්‍යය තැන්පත් කළ විට මෙම විසඳුම මා වෙනුවෙන් වැඩ කරයි top:50%, left:50%; transform:translate(-50%, -50%);... විශිෂ්ටයි. සුදු ස්කොට්බිග්ස් ප්‍රශ්නයට එකඟ වන්න. තර්කානුකූල වන්නේ සරල බව සෙවීමයි.
— nelek
3
සමහර විට එය ජයග්‍රාහකයෙකු නොවීමට හේතුව ඇන්ඩි ඊ ගේ විසඳුමට සමාන විය හැකි නමුත් පැරණි බ්‍රව්සර් වල ක්‍රියා නොකරයි <IE9
— niltoid
getBoundingClientRect මගේ කාර්ය සාධන ප්‍රස්ථාරවල දැවැන්ත නැවත වර්ණ ගැන්වීමක් ඇති කරයි
— frumbert
1
ඔබ අර්ථ යුතු rectභාවිතා var, letහෝ const. එසේ නොමැති නම් එය ලෙස අර්ථ දැක්වේ window.rect.
— hev1
2
left: rect.left + window.scrollX + (rect.width / 2), top: rect.top + window.scrollY + (rect.height / 2)මූලද්‍රව්‍යයක මැද පිහිටීම නැවත ලබා දෙනු ඇත
— අභිෂේක්
105

ඔබට එය ජාවාස්ක්‍රිප්ට් වලින් පමණක් කිරීමට අවශ්‍ය නම් , මෙන්න එක් ලයිනර් භාවිතා කරයිgetBoundingClientRect()

window.scrollY + document.querySelector('#elementId').getBoundingClientRect().top // Y

window.scrollX + document.querySelector('#elementId').getBoundingClientRect().left // X

පළමු පේළිය offsetTopලේඛනයට සාපේක්ෂව Y යැයි කියනු ඇත. දෙවන පේළිය offsetLeftලේඛනයට සාපේක්ෂව X යැයි කියනු ඇත.

getBoundingClientRect() javascript ශ්‍රිතයක් වන අතර එය කවුළුවේ දර්ශනපථයට සාපේක්ෂව මූලද්‍රව්‍යයේ පිහිටීම ලබා දෙයි.

— මුස්ට්කීම් කේ
source
3
මෙය විසඳුම විය යුතුය. මෙහි දිගු කේතයක් නොමැත, එය තේරුම් ගත හැකි සහ ඉතා නිවැරදි ය!
— ඊ ඇලෙක්සිස් එම්ටී
2
මූලද්‍රව්‍යය අනුචලනය කළ හැකි මූලද්‍රව්‍යයක් තුළ තිබේ නම් කුමක් කළ යුතුද? එය කළ හැකි එකම ක්‍රමය වන්නේ අනෙකුත් මවුපියන්ගේ මූලද්‍රව්‍යවල ඕෆ්සෙට් ටොප් එක එකතු කිරීමයි
— දිමිත්‍රි පිසාරෙව්
දිමිත්‍රි පවසන පරිදි මෙය වැරදි සහ ඉතා දෝෂ සහිතය. එයට තරම් ඉහළ ඡන්ද ප්‍රමාණයක් නොතිබිය යුතුය. ලේඛනයම අනුචලනය කළ හැකි බැවින් එය සැමවිටම අනුචලනය කළ හැකි මූලද්‍රව්‍යයක පවතී. වෙනත් වචන වලින් කිවහොත්, සම්පූර්ණ ලේඛනය දර්ශනපත්‍රයට නොගැලපේ නම්, පරිශීලකයා ප්‍රධාන කවුළුව කිසිසේත් අනුචලනය කර ඇත්නම් එය සැමවිටම වැරදිය.
— ලෙව්
47

බොහෝ බ්‍රව්සර්වල ඇති HTML අංග වලට පහත දේ ඇත: -

offsetLeft
offsetTop

පිරිසැලසුම ඇති එහි ආසන්නතම මවුපියන්ට සාපේක්ෂව මූලද්‍රව්‍යයේ පිහිටීම මේවා නියම කරයි. මෙම දෙමව්පියන්ට බොහෝ විට ඕෆ්සෙට් දෙමාපිය දේපල වෙත පිවිසිය හැකිය.

IE සහ FF3 ඇත

clientLeft
clientTop

මෙම ගුණාංග අඩු පොදු වන අතර, ඔවුන් එහි දෙමව්පියන්ගේ සේවාදායක ප්‍රදේශය සමඟ මූලද්‍රව්‍ය පිහිටීමක් නියම කරයි (පෑඩ් කළ ප්‍රදේශය සේවාදායකයාගේ ප්‍රදේශයේ කොටසක් වන නමුත් මායිම සහ ආන්තිකය නොවේ).

— ඇන්තනි ඩබ්ලිව්
source
36

පිටුවට ඇතුළත් වන්නේ නම් - අවම වශයෙන්- ඕනෑම “ඩීඅයිවී” එකක් නම්, මීඕව් විසින් ලබා දෙන ශ්‍රිතය වත්මන් පිටු සීමාවන් ඉක්මවා “වයි” අගය විසි කරයි. නිශ්චිත ස්ථානය සොයා ගැනීම සඳහා, ඔබ ඕෆ්සෙට්පෙරන්ට් සහ මාපිය නෝඩ් යන දෙකම හැසිරවිය යුතුය.

පහත දැක්වෙන කේතය උත්සාහ කරන්න (එය FF2 සඳහා පරීක්ෂා කර ඇත):


var getAbsPosition = function(el){
    var el2 = el;
    var curtop = 0;
    var curleft = 0;
    if (document.getElementById || document.all) {
        do  {
            curleft += el.offsetLeft-el.scrollLeft;
            curtop += el.offsetTop-el.scrollTop;
            el = el.offsetParent;
            el2 = el2.parentNode;
            while (el2 != el) {
                curleft -= el2.scrollLeft;
                curtop -= el2.scrollTop;
                el2 = el2.parentNode;
            }
        } while (el.offsetParent);

    } else if (document.layers) {
        curtop += el.y;
        curleft += el.x;
    }
    return [curtop, curleft];
};
— Refik Ayata
source
1
අනෙක් විසඳුම් සමඟ මෙන් එෆ්එෆ් 24.4 සමඟ ස්ථානගත කිරීමේ පිරිසැලසුමේ කොටසක් ලෙස මායිම් පළල පවතින විට ඉහත කේතය ක්‍රියා නොකරයි.
— මංකොල්ලකෑම
ඔබ ජීවිතාරක්ෂකයෙක්. මම මේ වන විට ඉතා ගැඹුරු ජීඩබ්ලිව්ටී දෝෂ කිහිපයක් හරහා කටයුතු කරන අතර මෙය ජේඑස්එන්අයි ක්‍රමයට විසි කිරීමෙන් මගේ සියලු ගැටලු විසඳනු ඇත !!
— විල් බර්න්
35

Element.prototypeඕනෑම මූලද්‍රව්‍යයක ඉහළ / වම් ලබා ගැනීමට ඔබට ගුණාංග දෙකක් එකතු කළ හැකිය .

Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    }
} );

Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
    get: function () { 
        return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
    }
} );

මෙය මේ ආකාරයට හැඳින්වේ:

var x = document.getElementById( 'myDiv' ).documentOffsetLeft;

මෙහි ප්‍රති results ල jQuery offset().topහා සසඳන නිරූපණයක් මෙන්න .left: http://jsfiddle.net/ThinkingStiff/3G7EZ/

— ThinkingStiff
source
16
වෙනස් Element.prototypeකිරීම සාමාන්‍යයෙන් නරක අදහසක් ලෙස සැලකේ . එය කේතය නඩත්තු කිරීම ඇත්තෙන්ම දුෂ්කර ය. එසේම, මෙම කේතය අනුචලනය සඳහා ගණන් නොගනී.
— ජැරඩ් ෆෝසයිත්
23

පිටුවට සාපේක්ෂව පිහිටීම කාර්යක්ෂමව ලබා ගැනීම සඳහා සහ පුනරාවර්තන ශ්‍රිතයක් භාවිතා නොකර: (IE ද ඇතුළත් වේ)

var element = document.getElementById('elementId'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
                document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?                   
                 document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;
— අබ්දුල් රහීම් හඩාඩ්
source
සියලු වැදගත් අනුචලන ටොප් / ස්ක්‍රෝල්ලෙෆ්ට් ඇතුළත් කිරීමෙන් මෙම පිළිතුර ටිකක් නිවැරදි වේ.
— ස්කන්ලිෆ්
19

මේ වගේ දෙයක් ගැන, මූලද්‍රව්‍යයේ හැඳුනුම්පත සම්මත කිරීමෙන් එය වමට හෝ ඉහළට ආපසු එනු ඇත, අපට ඒවා ඒකාබද්ධ කළ හැකිය:

1) වම්පස සොයා ගන්න

function findLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.left + window.scrollX;
} //call it like findLeft('#header');

2) ඉහළට සොයා ගන්න

function findTop(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.top + window.scrollY;
} //call it like findTop('#header');

හෝ 3) වමට සහ ඉහළට එකට සොයා ගන්න

function findTopLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return {top: rec.top + window.scrollY, left: rec.left + window.scrollX};
} //call it like findTopLeft('#header');
— අලිරේසා
source
16

ජාවාස්ක්‍රිප්ට් රාමුවක් භාවිතා කිරීමෙන් ඔබට වඩා හොඳ සේවාවක් ලැබෙනු ඇත, එවැනි තොරතුරු බ්‍රවුසරයෙන් ස්වාධීන ආකාරයකින් ආපසු ලබා දීමට (සහ තවත් බොහෝ දේ!) කාර්යයන් ඇත. මෙන්න කිහිපයක්:

මෙම රාමු සමඟ, ඔබට මෙවැනි දෙයක් කළ හැකිය: $('id-of-img').top රූපයේ y- පික්සෙල් ඛණ්ඩාංකය ලබා ගැනීමට.

— ෂාලොම් ක්‍රයිමර්
source
2
Ost කොස්ටා ඔවුන් සියල්ලන්ම එම ආකාරයේ කාර්යයන් භාවිතා කරයි, මෙය පරිණාමය වන ක්ෂේත්‍රයක් වුවද, විවිධ බ්‍රව්සර් පිරිවිතරයන්ට වෙනස් ලෙස අනුකූල වේ. බොහෝ කේතයන් වැරදි දේ "නිවැරදි කිරීම" සමඟ කටයුතු කරයි. ඔබ ඇත්ත වශයෙන්ම ප්‍රභව කේතය දෙස බැලිය යුතුය.
— ෂාලොම් ක්‍රයිමර්
18
rascraimer: jQuery සහ YUI යනු රාමු නොවේ !!! මේවා පුස්තකාල ! එය සමාන නොවේ. Jquery.com උපුටා දක්වමින් : "jQuery යනු වේගවත්, කුඩා හා විශේෂාංග වලින් පොහොසත් ජාවාස්ක්‍රිප්ට් පුස්තකාලයකි ." Yuilibrary.com උපුටා දක්වමින් (ඔබට URL හි "මැජික්" වචනයද දැකිය හැකිය ...): "YUI යනු පොහොසත් අන්තර්ක්‍රියාකාරී වෙබ් යෙදුම් තැනීම සඳහා නිදහස්, විවෘත මූලාශ්‍රයක් වන ජාවාස්ක්‍රිප්ට් සහ CSS පුස්තකාලයකි ."
— Sk8erPeter
29
ඉතින් ඔබ මෙම සරල කාර්යය සඳහා විශාල පුස්තකාල භාවිතා කළ යුතුද? අවශ්ය නැහැ. JS සමඟ යමක් කිරීමට අවශ්‍ය සෑම අවස්ථාවකම මට මෙම jQuery විසඳුම් ලැබෙනු ඇතැයි මම වෛර කරමි. jQuery JS නොවේ!
— ඔප්ටාට් ජොබර්
1
AppOpptattJobber මම එකඟයි ... JQuery යනු ජාවාස්ක්‍රිප්ට් නොවේ. එය ජාවාස්ක්‍රිප්ට් මත රඳා පවතින නමුත් එය සම්පූර්ණයෙන්ම වෙනස් ක්‍රමලේඛන භාෂාවකි.
— නික් මැනිං
5
IckNickManning එය නව භාෂාවක් නොවේ, එය DOM සඳහා වියුක්ත ස්ථරයක් වන අතර එමඟින් ඔබේ කේතයට ගැළපුම සහ කාර්යසාධනය නිවැරදිව ලිවීමට සිදු වේ. ඔබ jQuery භාවිතා නොකරන්නේ නම්, ඔබ කෙසේ හෝ වියුක්ත ස්ථරයක් භාවිතා කළ යුතුය.
— ජින්මන්
15

jQuery .offset () පළමු මූලද්‍රව්‍යයේ වත්මන් ඛණ්ඩාංක ලබා ගනී, නැතහොත් සෑම මූලද්‍රව්‍යයකම ඛණ්ඩාංක, ලේඛනයට සාපේක්ෂව ගැලපෙන මූලද්‍රව්‍ය කට්ටලයක සැකසෙනු ඇත.

— akauppi
source
කිසියම් හේතුවක් නිසා එය වෙනත් බ්‍රව්සර් සමඟ සසඳන විට IE හි සමාන ප්‍රති results ල ලබා නොදේ. IE හි එය කවුළුවට සාපේක්ෂව ස්ථානයක් ලබා දෙන බව මම සිතමි, එබැවින් ඔබ අනුචලනය කළහොත් අනෙක් ඒවාට සාපේක්ෂව ඔබට IE හි වෙනස් ප්‍රති results ල ලැබෙනු ඇත
— අබ්දුල් රහීම් හඩාඩ්
1
ඕෆ්සෙට් () විශාලනය මගින් ව්‍යාකූල වී ඇත, අවම වශයෙන් ඇන්ඩ්‍රොයිඩ් ක්‍රෝම් තුළ, එබැවින් එය නිෂ් .ල ය. stackoverflow.com/a/11396681/1691517 විශාලනය ඉවසා දරා සිටින ආකාරය පෙන්වයි.
— ටිමෝ කොහ්කෙනන්
10

මායිම් සඳහා ඉඩ ලබා දෙන ග්‍රාහක ලෙෆ්ට් එකට එකතු කර, පසුව අනුවාද තුනක් නිර්මාණය කර ඇත.

getAbsoluteOffsetFromBody - ou meouw ට සමාන, මෙය ලේඛනයේ ශරීරයට හෝ html මූලද්‍රව්‍යයට සාපේක්ෂව නිරපේක්ෂ පිහිටීම ලබා ගනී (quirks mode මත පදනම්ව)

getAbsoluteOffsetFromGivenElement - දී ඇති මූලද්‍රව්‍යයට (සාපේක්ෂ එල්) සාපේක්ෂව නිරපේක්ෂ පිහිටීම ලබා දෙයි. දී ඇති මූලද්‍රව්‍යයේ එල් මූලද්‍රව්‍යය අඩංගු විය යුතු බව සලකන්න, නැතහොත් මෙය getAbsoluteOffsetFromBody ලෙස ක්‍රියා කරයි. ඔබට වෙනත් (දන්නා) මූලද්‍රව්‍යයක් තුළ මූලද්‍රව්‍ය දෙකක් තිබේ නම් (විකල්පයක් ලෙස නෝඩ් ගස දක්වා ඇති නෝඩ් කිහිපයක්) සහ ඒවා එකම ස්ථානයක් බවට පත් කිරීමට අවශ්‍ය නම් මෙය ප්‍රයෝජනවත් වේ.

getAbsoluteOffsetFromRelative - පිහිටීම සහිත පළමු මව් මූලද්‍රව්‍යයට සාපේක්ෂව නිරපේක්ෂ පිහිටීම ලබා දෙයි: සාපේක්ෂ. මෙය getAbsoluteOffsetFromGivenElement හා සමාන වේ, එකම හේතුව නිසා නමුත් එය යන්නේ පළමු ගැලපෙන මූලද්‍රව්‍යය දක්වා පමණි.

getAbsoluteOffsetFromBody = function( el )
{   // finds the offset of el from the body or html element
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

getAbsoluteOffsetFromGivenElement = function( el, relativeEl )
{   // finds the offset of el from relativeEl
    var _x = 0;
    var _y = 0;
    while( el && el != relativeEl && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

getAbsoluteOffsetFromRelative = function( el )
{   // finds the offset of el from the first parent with position: relative
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
        if (el != null)
        {
            if (getComputedStyle !== 'undefined')
                valString = getComputedStyle(el, null).getPropertyValue('position');
            else
                valString = el.currentStyle['position'];
            if (valString === "relative")
                el = null;
        }
    }
    return { top: _y, left: _x };
}

ඔබට තවමත් අනුචලනය සම්බන්ධ ගැටළු තිබේ නම්, ඔබට http://www.greywyvern.com/?post=331 බැලීමට උත්සාහ කළ හැකිය - getStyle හි අවම වශයෙන් එක් සැක සහිත කේතයක් වත් දුටිමි, බ්‍රව්සර් හැසිරෙනු ඇතැයි උපකල්පනය කළ යුතුය. , නමුත් ඉතිරිය කිසිසේත් පරීක්ෂා කර නැත.

— ජේම්ස් කාලයිල්-ක්ලාක්
source
සිත්ගන්නා සුළුය ... නමුත් එජ් getAbsoluteOffsetFromBody (මූලද්‍රව්‍යය) මත .අපි අනුචලනය කරන විට වෙනස් අගයක් ලබා දෙයි, ක්‍රෝම් හි මා අනුචලනය කරන විට එය ස්ථාවරව පවතී. එජ් අනුචලන පිහිටීම සමඟ ගැලපෙන බව පෙනේ. මූලද්‍රව්‍යය අනුචලනය කළ විට මට negative ණ අගයක් ලැබේ.
— නෝමන්
getAbsoluteOffsetFromRelative මගේ දවස සෑදුවා, මට බූට්ස්ට්‍රැප් හි ජාවාස්ක්‍රිප්ට් නොමැතිව බූට්ස්ට්‍රැප් මෙවලම් ප්‍රතිනිෂ්පාදනය කිරීමට සිදු විය, එය මට බොහෝ උපකාර විය.
— නොලියර්න්
Meouw ඔවුන්ගේ පරිශීලක නාමය වෙනස් කරන්නේ නම්, පිළිතුරු දීමට සබැඳිය: stackoverflow.com/a/442474/3654837 . (මට මේ පැරණි නූල ගැසීමට අවශ්‍ය නැත, ඔව්, මම අදහස්
— දැක්වුවෙමි
8

jQuery භාවිතා කරන්නේ නම්, මාන ප්ලගිනය විශිෂ්ට වන අතර ඔබට අවශ්‍ය දේ හරියටම සඳහන් කිරීමට ඉඩ දෙයි.

උදා

සාපේක්ෂ පිහිටීම, නිරපේක්ෂ පිහිටීම, පෑඩින් නොමැතිව නිරපේක්ෂ පිහිටීම, පෑඩින් සමඟ ...

එය දිගටම කරගෙන යයි, ඔබට එය සමඟ බොහෝ දේ කළ හැකි යැයි කියමු.

JQuery භාවිතා කිරීමේ ප්‍රසාද දීමනාව නම් එය සැහැල්ලු ගොනු ප්‍රමාණය සහ පහසු භාවිතයයි, ඔබ එය නොමැතිව ජාවාස්ක්‍රිප්ට් වෙත නොයනු ඇත.

— ජෝන්_
source
8

ඔබ jQuery භාවිතා කරන්නේ නම්, මෙය සරල විසඳුමක් විය හැකිය:

<script>
  var el = $("#element");
  var position = el.position();
  console.log( "left: " + position.left + ", top: " + position.top );
</script>
— ඇඩම් බූස්ටානි
source
8

කුඩා හා කුඩා අතර වෙනස

function getPosition( el ) {
    var x = 0;
    var y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
    }
    return { top: y, left: x };
}

ඛණ්ඩාංක සඳහා උදාහරණ බලන්න: http://javascript.info/tutorial/coordinates

— කිං රයිඩර්
source
අවාසනාවකට මෙය නවීන HTML ලේඛනයක් තුළ සොයාගත හැකි සියලුම අංග සඳහා ක්‍රියා නොකරයි. කාවැද්දූ <svg>අංග, උදාහරණයක් ලෙස, ඇති නොවන offsetLeft, offsetTopසහ offsetParentගුණ.
— ජොනතන් යුනිස්
එය සාධාරණ DIVහෝ IMGනැත SVG. "උදාහරණ ඛණ්ඩාංක බලන්න" බලන්න? ඔබට වස්තුව සොයාගත හැකිය svg යනු ස්ථාන ඇමතුම getOffsetRect , උත්සාහ කර වස්තු වැඩ මත රඳා පවතී.
— කිං රයිඩර්
7

මම නිර්මාණය කිරීමට සමත් වූ හොඳම කේතය මෙයයි (jQuery හි ඕෆ්සෙට් () මෙන් නොව අයිෆ්‍රේම් වලද ක්‍රියා කරයි). වෙබ්කිට් වල වෙනස් හැසිරීමක් ඇති බව පෙනේ.

මීව්ගේ ප්‍රකාශය මත පදනම්ව:

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        // chrome/safari
        if ($.browser.webkit) {
            el = el.parentNode;
        } else {
            // firefox/IE
            el = el.offsetParent;
        }
    }
    return { top: _y, left: _x };
}
— රොන් රයිටර්
source
1
ඔබ jQueryභාවිතා කිරීමට අවශ්‍ය බව සලකන්න $.browser.webkit; navigator.userAgentපිරිසිදු දේම කිරීමට ඔබට සෙල්ලම් කිරීමට අවශ්‍ය වනු JavaScriptඇත.
— එස්පී
3
Q. බ්‍රව්සරය jQuery හි නවතම අනුවාදයේ තවදුරටත් නොමැත
— Gus
අවාසනාවකට මෙන් එෆ්එෆ් 24.4 සමඟ වුවද ස්ථානගත කිරීමේ පිරිසැලසුමේ කොටසක් ලෙස මායිම් පළල පවතින විට ඉහත කේතය ක්‍රියා නොකරයි.
— මංකොල්ලකෑම
7

මා සොයාගෙන ඇති පිරිසිදුම ප්‍රවේශය jQuery හි භාවිතා කරන තාක්‍ෂණයේ සරල කළ අනුවාදයකි offset. එය ආරම්භ වන වෙනත් පිළිතුරු වලට සමාන ය getBoundingClientRect; එය පසුව අනුචලන පිහිටීම සඳහා සැකසීමට windowසහ (බොහෝ විට පෙරනිමිය) documentElementආන්තිකය වැනි දේ භාවිතා කරයි body. 

var rect = el.getBoundingClientRect();
var docEl = document.documentElement;

var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

කේත ස්නිපටය පෙන්වන්න

— ජේම්ස් මොන්ටැග්න්
source
6

බොහෝ පිළිතුරු වල පතුලේ මෙය නැති වීමට බොහෝ දුරට ඉඩ ඇති නමුත්, මෙහි ඉහළම විසඳුම් මා වෙනුවෙන් ක්‍රියා නොකරයි.
මට කිව හැකි තාක් දුරට වෙනත් කිසිදු පිළිතුරක් උදව් නොවනු ඇත.

තත්වය :
HTML5 පිටුවක මා සතුව මෙනුවක් තිබී ඇත, එය ශීර්ෂයක් තුළ nav අංගයක් විය (ශීර්ෂකය නොව වෙනත් මූලද්‍රව්‍යයක ශීර්ෂකය).
පරිශීලකයෙකු අනුචලනය කළ පසු සංචලනය ඉහළට ඇලී සිටීමට මට අවශ්‍ය විය, නමුත් මෙයට පෙර ශීර්ෂකය නිරපේක්ෂව ස්ථානගත කර ඇත (එබැවින් මට එය වෙනත් දෙයක් තරමක් උඩින් තැබිය හැකිය).
ඉහත විසඳුම් කිසි විටෙකත් වෙනසක් ඇති කළේ නැත .ඔෆ්සෙට් ටොප් වෙනස් නොවන නිසා මෙය නිරපේක්ෂ ස්ථානගත මූලද්‍රව්‍යයකි. මීට අමතරව .scrollTop දේපල හුදෙක් ඉහළම මූලද්‍රව්‍යයේ ඉහළින්ම විය ... එනම් 0 යැයි පැවසීම සහ සෑම විටම 0 වනු ඇත.
මෙම දෙක භාවිතා කරමින් මා විසින් සිදු කරන ලද ඕනෑම පරීක්‍ෂණයක් (සහ getBoundingClientRect ප්‍රති results ල සමඟ සමාන වේ), සංචාලන තීරුවේ මුදුන කවදා හෝ නැරඹිය හැකි පිටුවේ ඉහළට අනුචලනය වී ඇත්දැයි මට නොකියනු ඇත (නැවතත්, කොන්සෝලයෙහි වාර්තා කර ඇති පරිදි, ඒවා අනුචලනය කිරීමේදී එකම සංඛ්‍යා වල රැඳී සිටියේය සිදුවිය).

විසඳුමක්
මට විසඳුම උපයෝගී කර ගැනීමයි

window.visualViewport.pageTop

පේජ් ටොප් දේපලෙහි වටිනාකම තිරයේ නැරඹිය හැකි කොටස පිළිබිඹු කරයි, එම නිසා නැරඹිය හැකි ප්‍රදේශයේ මායිම් වෙත යොමු වන මූලද්‍රව්‍යයක් කොතැනදැයි සොයා ගැනීමට මට ඉඩ දෙයි.

අනුචලනය කිරීම සමඟ කටයුතු කරන ඕනෑම වේලාවක අනුචලනය කිරීම අනවශ්‍යය, අනුචලනය වන මූලද්‍රව්‍යයන්ගේ චලනයට ක්‍රමලේඛව ප්‍රතිචාර දැක්වීමට මෙම විසඳුම භාවිතා කිරීමට මම බලාපොරොත්තු වෙමි.
එය වෙනත් කෙනෙකුට උපකාරී වේ යැයි සිතමි.
වැදගත් සටහන: මෙය ක්‍රෝම් සහ ඔපෙරා වල දැනට ක්‍රියාත්මක වන බව පෙනේ (නියත වශයෙන්ම ෆයර්ෆොක්ස් හි නොවේ (6-2018) ... ෆයර්ෆොක්ස් දෘශ්‍ය දර්ශන පෝර්ට් සඳහා සහය දක්වන තුරු මෙම ක්‍රමය භාවිතා නොකිරීමට මම නිර්දේශ කරමි, (ඔවුන් ඉක්මනින් එසේ කරනු ඇතැයි මම බලාපොරොත්තු වෙමි ... අනෙක් ඒවාට වඩා වැඩි හැඟීමක්).


යාවත්කාලීන කිරීම:
මෙම විසඳුම පිළිබඳ සටහනක් පමණි.
"... අනුචලනය වන මූලද්‍රව්‍යයන්ගේ චලනයට ක්‍රමලේඛිකව ප්‍රතිචාර දක්වන" තත්වයන් සඳහා මා සොයාගත් දේ ඉතා වටිනා බව මම තවමත් සොයාගෙන ඇත. අදාළ වේ. මට තිබූ ගැටලුවට වඩා හොඳ විසඳුම වූයේ සැකසීමට CSS භාවිතා කිරීමයි පිහිටීම : ඇලෙන සුළුයමූලද්රව්යය මත. ඇලෙන සුළු භාවිතයෙන් ඔබට ජාවාස්ක්‍රිප්ට් භාවිතා නොකර මූලද්‍රව්‍යයක් ඉහළින්ම තබා ගත හැකිය (සටහන: මෙය මූලද්‍රව්‍යය ස්ථාවර ලෙස වෙනස් කිරීම තරම්

effectively ලදායී ලෙස ක්‍රියා නොකරනු ඇති නමුත් බොහෝ භාවිතයන් සඳහා ඇලෙන සුළු ප්‍රවේශය වඩා උසස් වනු ඇත) UPDATE01:
එබැවින් මම තේරුම් ගත්තා වෙනත් පිටුවක් සඳහා මට අවශ්‍ය වූයේ මෘදු සංකීර්ණ අනුචලන සැකසුමක මූලද්‍රව්‍යයක පිහිටීම හඳුනා ගැනීමට අවශ්‍ය වූ ස්ථානයකි (පණිවිඩයක කොටසක් ලෙස අතීතයට අනුචලනය වන සමාන්තරය සහ මූලද්‍රව්‍ය). යමක් කළ යුත්තේ කවදාද යන්න තීරණය කිරීම සඳහා මා භාවිතා කළ අගය පහත දැක්වේ.

  let bodyElement = document.getElementsByTagName('body')[0];
  let elementToTrack = bodyElement.querySelector('.trackme');
  trackedObjPos = elementToTrack.getBoundingClientRect().top;
  if(trackedObjPos > 264)
  {
    bodyElement.style.cssText = '';
  }

මෙම පිළිතුර දැන් වඩාත් පුළුල් ලෙස ප්‍රයෝජනවත් වේ යැයි සිතමු.

— MER
source
පිළිතුරු වර්ග කිරීම සඳහා ඔබ සක්‍රීයව ක්ලික් කළ විට මෙය බොහෝ පිළිතුරු වල ඉහළින්ම තිබිය හැකිය
— lucchi
@lucchi: D හොඳයි, මට ඉහළ පෙළ ඉවත් කළ හැකි යැයි සිතමි ... මම මෙය නැවත වරක් සිදු කර මගේ ගැටලුවට වඩා හොඳ විසඳුමක් සොයා ගත හැකි බව වටහා ගත්තද ... මගේ පිළිතුර වඩා වැඩි වුවද වඩාත් සම්පූර්ණ පිළිතුරු සඳහා පාද සටහන. මගේ අවශ්‍යතා අනෙක් පිළිතුරු මට ප්‍රයෝජනවත් නොවන තරමට පොදු නොවිය හැකි යැයි මම සැක කරමි.
— MER
1
ඔබගේ පිළිතුර මම කෙසේ හෝ අගය කරමි, එය ඔබට පැවසීම පමණි, ඔබ අලුත් දෙයක් ලියා ඇති බව කැමති ඕනෑම අයෙකු දැන ගනු ඇත. ඔබ තනිවම නොවේ ....
— lucchi
5

මම එය මේ ආකාරයට කළෙමි, එබැවින් එය පැරණි බ්‍රව්සර් සමඟ හරස් අනුකූල විය.

// For really old browser's or incompatible ones
    function getOffsetSum(elem) {
        var top = 0,
            left = 0,
            bottom = 0,
            right = 0

         var width = elem.offsetWidth;
         var height = elem.offsetHeight;

        while (elem) {
            top += elem.offsetTop;
            left += elem.offsetLeft;
            elem = elem.offsetParent;
        }

         right = left + width;
         bottom = top + height;

        return {
            top: top,
            left: left,
            bottom: bottom,
            right: right,
        }
    }

    function getOffsetRect(elem) {
        var box = elem.getBoundingClientRect();

        var body = document.body;
        var docElem = document.documentElement;

        var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
        var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

        var clientTop = docElem.clientTop;
        var clientLeft = docElem.clientLeft;


        var top = box.top + scrollTop - clientTop;
        var left = box.left + scrollLeft - clientLeft;
        var bottom = top + (box.bottom - box.top);
        var right = left + (box.right - box.left);

        return {
            top: Math.round(top),
            left: Math.round(left),
            bottom: Math.round(bottom),
            right: Math.round(right),
        }
    }

    function getOffset(elem) {
        if (elem) {
            if (elem.getBoundingClientRect) {
                return getOffsetRect(elem);
            } else { // old browser
                return getOffsetSum(elem);
            }
        } else
            return null;
    }

ජාවාස්ක්‍රිප්ට් හි ඛණ්ඩාංක පිළිබඳ වැඩි විස්තර මෙහි: http://javascript.info/tutorial/coordinates

— බොජන් ක්සෙන්මන්
source
4

මූලද්‍රව්‍යයක සම්පූර්ණ ඕෆ්සෙට් ලබා ගැනීම සඳහා, ඔබට සියලු මව් ඕෆ්සෙට් පුනරාවර්තනය කළ හැකිය:

function getParentOffsets(el): number {
if (el.offsetParent) {
    return el.offsetParent.offsetTop + getParentOffset(el.offsetParent);
} else {
    return 0;
}
}

මෙම උපයෝගීතා ශ්‍රිතය සමඟ ඩොම් මූලද්‍රව්‍යයක මුළු ඉහළ ඕෆ්සෙට් එක වන්නේ: 

el.offsetTop + getParentOffsets(el);
— කෙවින් කේ.
source
4 
/**
 *
 * @param {HTMLElement} el
 * @return {{top: number, left: number}}
 */
function getDocumentOffsetPosition(el) {
    var position = {
        top: el.offsetTop,
        left: el.offsetLeft
    };
    if (el.offsetParent) {
        var parentPosition = getDocumentOffsetPosition(el.offsetParent);
        position.top += parentPosition.top;
        position.left += parentPosition.left;
    }
    return position;
}

පිළිතුර සඳහා සිතීමේ ස්ටිෆ්ට ස්තූතියි , මෙය එහි තවත් අනුවාදයක් පමණි.

— Vn Quyết
source
2

පරිශීලකයෙකු ක්ලික් කරන වගු පේළියක ඇති සබැඳිය මත පදනම්ව, බූට්ස්ට්‍රැප් 2 මොඩලයක් ස්ථානගත කිරීම සඳහා මම ඇන්ඩි ඊ ගේ විසඳුම සාර්ථකව භාවිතා කළෙමි. පිටුව ටේප්ස්ට්‍රි 5 පිටුවක් වන අතර පහත ජාවාස්ක්‍රිප්ට් ජාවා පිටු පන්තියට ආනයනය කෙරේ.

javascript:

function setLinkPosition(clientId){
var bodyRect = document.body.getBoundingClientRect(),
elemRect = clientId.getBoundingClientRect(),
offset   = elemRect.top - bodyRect.top;
offset   = offset + 20;
$('#serviceLineModal').css("top", offset);

}

මගේ මොඩල් කේතය:

<div id="serviceLineModal" class="modal hide fade add-absolute-position" data-backdrop="static" 
 tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top:50%;">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 id="myModalLabel">Modal header</h3>
</div>

<div class="modal-body">
    <t:zone t:id="modalZone" id="modalZone">
        <p>You selected service line number: ${serviceLineNumberSelected}</p>
    </t:zone>
</div>

<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <!-- <button class="btn btn-primary">Save changes</button> -->
</div>

පුඩුවේ ඇති සබැඳිය:

<t:loop source="servicesToDisplay" value="service" encoder="encoder">
<tr style="border-right: 1px solid black;">       
    <td style="white-space:nowrap;" class="add-padding-left-and-right no-border"> 
        <a t:type="eventLink" t:event="serviceLineNumberSelected" t:context="service.serviceLineNumber" 
            t:zone="pageZone" t:clientId="modalLink${service.serviceLineNumber}"
            onmouseover="setLinkPosition(this);">
            <i class="icon-chevron-down"></i> <!-- ${service.serviceLineNumber} -->
        </a>
    </td>

පිටු පන්තියේ ජාවා කේතය:

void onServiceLineNumberSelected(String number){
    checkForNullSession();
    serviceLineNumberSelected = number;
    addOpenServiceLineDialogCommand();
    ajaxResponseRenderer.addRender(modalZone);
}

protected void addOpenServiceLineDialogCommand() {
    ajaxResponseRenderer.addCallback(new JavaScriptCallback() {
        @Override
        public void run(JavaScriptSupport javascriptSupport) {
            javascriptSupport.addScript("$('#serviceLineModal').modal('show');");
        }
    });
}

මෙය යමෙකුට උපකාරී වේ යැයි සිතමි, මෙම ලිපිය උදව් විය.

— මාර්ක් එස්පිනෝසා
source
මෙම js කේතය මට උදව් විය, මා සතුව පැරණි වෙබ් ආකෘති යෙදුමක් ඇත .aspx පිටු එන්නත් කර ඇති අතර, මුළු DOM ගසම විනාශ වී ඇති නිසා එය දර්ශන තලයට ගෙන ඒමට මා විසින් නිර්මාණය කරන ලද උත්පතන කොටුවක () එකතු කරන්නේ කෙසේදැයි මට සිතාගත නොහැකි විය. බහු ස්ථානගත කිරීම් සහ වැරදි සලකුණු සමඟ. Body.getBoundingClientRect () භාවිතා කිරීමෙන් පසුව එහි ඉහළ ස්ථානගත කිරීම මට අවශ්‍ය විය. ස්තූතියි.
— බ්‍රැඩ් මාටින්
1

බොහෝ පර්යේෂණ හා පරීක්ෂණ වලින් පසුව මෙය ක්‍රියාත්මක වන බව පෙනේ

function getPosition(e) {
    var isNotFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') == -1);
    var x = 0, y = 0;
    while (e) {
        x += e.offsetLeft - e.scrollLeft + (isNotFirefox ? e.clientLeft : 0);
        y += e.offsetTop - e.scrollTop + (isNotFirefox ? e.clientTop : 0);
        e = e.offsetParent;
    }
    return { x: x + window.scrollX, y: y + window.scrollY };
}

http://jsbin.com/xuvovalifo/edit?html,js,output බලන්න

— kernowcode
source
1

මම හිතුවා මමත් මේක එලියට විසි කරනවා කියලා.
පැරණි බ්‍රව්සර් වලින් මට එය පරීක්ෂා කිරීමට නොහැකි විය, නමුත් එය ඉහළම ඉහළම 3 හි ක්‍රියා කරයි. :)

Element.prototype.getOffsetTop = function() {
    return ( this.parentElement )? this.offsetTop + this.parentElement.getOffsetTop(): this.offsetTop;
};
Element.prototype.getOffsetLeft = function() {
    return ( this.parentElement )? this.offsetLeft + this.parentElement.getOffsetLeft(): this.offsetLeft;
};
Element.prototype.getOffset = function() {
    return {'left':this.getOffsetLeft(),'top':this.getOffsetTop()};
};
— ඩන්කන්
source
0

විවිධ බ්‍රව්සර් මායිම්, පෑඩින්, ආන්තිකය යනාදිය විවිධ ආකාරවලින් විදහා දක්වයි. ඔබට අවශ්‍ය සෑම මූල මූලද්‍රව්‍යයකම නිශ්චිත මූලද්‍රව්‍යයේ ඉහළ සහ වම් ස්ථාන ලබා ගැනීමට මම කුඩා කාර්යයක් ලිව්වෙමි.

function getTop(root, offset) {
    var rootRect = root.getBoundingClientRect();
    var offsetRect = offset.getBoundingClientRect();
    return offsetRect.top - rootRect.top;
}

වම් ස්ථානය ලබා ගැනීම සඳහා ඔබ ආපසු යා යුතුය: 

    return offsetRect.left - rootRect.left;
— සමදාදි
source
0

JS හි පේළි දෙකක් ලෙස මෙය පහසුය

var elem = document.getEmelentById("id");    
 alert(elem.getBoundingClientRect());
— තල්හා රෆික්
source
-1

වමේ සහ ඉහළ කොටස සම්බන්ධයෙන් div හි පිහිටීම ලබා ගන්න

  var elm = $('#div_id');  //get the div
  var posY_top = elm.offset().top;  //get the position from top
  var posX_left = elm.offset().left; //get the position from left
— විශාල් කුමාර්
source
පහළ සහ දකුණ ඕෆ්සෙට් වල ගුණාංග නොවන නිසා මම ඡන්දය ප්‍රකාශ කළෙමි
— මැක්‍රෝමන්
Ac මැක්‍රෝමන්, මම ඔබේ තීරණයට ගරු කරමි, නමුත් "පහළ සහ දකුණේ කේතය පරීක්ෂා නොකෙරේ" යනුවෙන් මම දැනටමත් පා text යෙන් පැහැදිලි කර ඇත්තෙමි. එසේම, මම ඉතා ඉක්මනින් මගේ කේතය යාවත්කාලීන කරමි.
— විශාල් කුමාර්
මම හිතන්නේ එය el.offsetTopසහ el.offsetLeft(OP jQuery ගැන කිසිවක් නොකියයි ... ඔබේ පිළිතුර jQuery භාවිතා කරන්නේ ඇයිදැයි මට විශ්වාස නැත ...)
— mesqueeb
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.