Question

我正在构建一个vueJs网络应用程序，我需要根据视口（而不是相对父元素）在我的web应用程序中的元素位置。我想知道是否有一个函数/属性这样做。

.offsetLeft 不是我需要的，因为该元素位于具有 position：relative 的父元素内。

请查看我的笔：https://codepen.io/mister-hansen/pen/aGdWMp （举一个例子，不同的位置是：相对的。）

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;
  }
}

Answer 1

使用getBoundingClientRect()。 x和y返回相对于顶级视口。

强调我的：

返回的值是DOMRect对象，它是对象的并集 getClientRects()为元素返回的矩形，即CSS 与元素关联的边框。结果是最小的包含整个元素的矩形，只读left，top， right，bottom，x，y，width和height属性描述了整体边框，以像素为单位。 width和height以外的其他属性相对于视口的左上角。

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.net/npm/vue@2.5.16/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>

通过JS定位与视口（非相对）相关的元素的坐标

1 个答案: