I am building a vueJs web-app and I need the position of an element inside my web-app according to the viewport (not to the relative parent element). I wonder if there is a function/property doing this.
.offsetLeft is not what I need, because the element is inside of parent-elements with position: relative.
Please check out my pen: (With an example what different position: relative makes.)
HTML
<div id="app">
<div class="box">
<div class="box__in" ref="my_box_a">
What is my position?
<br> offsetLeft: <strong>{{posBoxA}}</strong>
</div>
</div>
<div class="box box--relative">
<div class="box__in" ref="my_box_b">
What is my position in relative box?
<br>
offsetLeft: <strong>{{posBoxB}}?!</strong>
</div>
</div>
</div>
JS - VueJs
const app = new Vue({
el: '#app',
data () {
return {
posBoxA: 0,
posBoxB: 0,
}
},
mounted () {
this.calcPosOfBox()
},
methods: {
calcPosOfBox () {
this.posBoxA = this.$refs['my_box_a'].offsetLeft
this.posBoxB = this.$refs['my_box_b'].offsetLeft
}
}
})
SCSS
html, body {
margin: 0;
}
#app {
padding: 10vh 100px;
font-family: sans-serif;
}
.box {
margin: 0 auto 10vh;
padding: 10vh 50px;
background: lightgrey;
&--relative {
border: 1px solid red;
position: relative;
}
&__in {
padding: 1rem;
background: lightgreen;
}
}
I am building a vueJs web-app and I need the position of an element inside my web-app according to the viewport (not to the relative parent element). I wonder if there is a function/property doing this.
.offsetLeft is not what I need, because the element is inside of parent-elements with position: relative.
Please check out my pen: https://codepen.io/mister-hansen/pen/aGdWMp (With an example what different position: relative makes.)
HTML
<div id="app">
<div class="box">
<div class="box__in" ref="my_box_a">
What is my position?
<br> offsetLeft: <strong>{{posBoxA}}</strong>
</div>
</div>
<div class="box box--relative">
<div class="box__in" ref="my_box_b">
What is my position in relative box?
<br>
offsetLeft: <strong>{{posBoxB}}?!</strong>
</div>
</div>
</div>
JS - VueJs
const app = new Vue({
el: '#app',
data () {
return {
posBoxA: 0,
posBoxB: 0,
}
},
mounted () {
this.calcPosOfBox()
},
methods: {
calcPosOfBox () {
this.posBoxA = this.$refs['my_box_a'].offsetLeft
this.posBoxB = this.$refs['my_box_b'].offsetLeft
}
}
})
SCSS
html, body {
margin: 0;
}
#app {
padding: 10vh 100px;
font-family: sans-serif;
}
.box {
margin: 0 auto 10vh;
padding: 10vh 50px;
background: lightgrey;
&--relative {
border: 1px solid red;
position: relative;
}
&__in {
padding: 1rem;
background: lightgreen;
}
}
Share
Improve this question
edited Apr 25, 2018 at 8:26
Herr_Hansen
asked Apr 23, 2018 at 14:45
Herr_HansenHerr_Hansen
2,4213 gold badges22 silver badges17 bronze badges
2
-
2
Use
getBoundingClientRect()
. Thex
andy
it returns are relative to the top-level viewport. – zero298 Commented Apr 23, 2018 at 14:54 - Yes, that's the solution. See solved issue in other pen: codepen.io/mister-hansen/pen/PeZQZJ – Herr_Hansen Commented Apr 23, 2018 at 16:59
1 Answer
Reset to default 6Use getBoundingClientRect()
. The x
and y
returns are relative to the top-level viewport.
Emphasis mine:
The returned value is a
DOMRect
object which is the union of the rectangles returned bygetClientRects()
for the element, i.e., the CSS border-boxes associated with the element. The result is the smallest rectangle which contains the entire element, with read-onlyleft
,top
,right
,bottom
,x
,y
,width
, andheight
properties describing the overall border-box in pixels. Properties other thanwidth
andheight
are relative to the top-left of the viewport.
const app = new Vue({
el: '#app',
data() {
return {
posBoxA: 0,
posBoxB: 0,
}
},
mounted() {
this.calcPosOfBox()
},
methods: {
calcPosOfBox() {
const boxABB = this.$refs["my_box_a"].getBoundingClientRect();
const boxBBB = this.$refs["my_box_b"].getBoundingClientRect();
this.posBoxA = boxABB.x;
this.posBoxB = boxBBB.x;
}
}
})
html,
body {
margin: 0;
}
#app {
padding: 10vh 100px;
font-family: sans-serif;
}
.box {
margin: 0 auto 10vh;
padding: 10vh 50px;
background: lightgrey;
}
.box--relative {
border: 1px solid red;
position: relative;
}
.box__in {
padding: 1rem;
background: lightgreen;
}
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vue.min.js"></script>
<div id="app">
<div class="box">
<div class="box__in" ref="my_box_a">
What is my position?
<br> offsetLeft: <strong>{{posBoxA}}</strong>
</div>
</div>
<div class="box box--relative">
<div class="box__in" ref="my_box_b">
What is my position in relative box?
<br> offsetLeft: <strong>{{posBoxB}}?!</strong>
</div>
</div>
</div>