Question

我有一个带有无序列表的组件，我想要做的是加载组件时我希望组件向下滚动到

元素，并带有类名＆＃39;实际月份＆＃ 39;所以它可见。

<b-card no-body header="<i class='fa fa-align-justify'></i> Unorderd List"  style="height: 680px">
          <b-tabs card pills>
              <b-tab v-for="debt in user_debts"  :title="Debts list"  :key="debt.id" class="card-height">             
                 <table class="table table-sm amortization-header header-fixed">
                  <thead>
                      <tr>
                        <th>Month</th>
                        <th>Balance</th>
                        <th>Paid</th>
                        <th>Debt</th>
                        <th>Nominal Interest</th>
                      </tr>
                  </thead>
                  <tbody> 
                    <tr v-for="month in amortization.schedule" :class="{'actual-month' : month.month == amortization.actual_month}">
                      <td>{{month.month}}</td>
                      <td>{{month.balance.toLocaleString()}}<span class="total">€</span></td>
                      <td>{{month.monthly_payment}}<span class="total">€</span></td>
                      <td>{{month.principle}}<span class="total">€</span></td>
                      <td>{{month.interest}}<span class="total">€</span></td>
                    </tr>
                  </tbody>
                </table>
              </b-tab>
          </b-tabs>
        </b-card>

Answer 1

您可以使用scrollIntoView：

mounted: function (){
  var el = this.$el.getElementsByClassName("actual-month")[0];
  el.scrollIntoView();
}

Answer 2

可能有几种方法可以做到这一点，但我会把它放在mixin中，所以我可以重复使用它，所以：

const scroller = {
  methods: {
    scrollToClass(className) {
      // Get the first element with the given class name
      let el = this.$el.querySelector(className)
      // Get the bounding rectangle so we can get the element position position
      let rect = el.getBoundingClientRect()
      // Scroll to the element (using x and y axis)
      window.scrollTo(rect.left, rect.top)
    }
  }
}

然后您可以在mounted挂钩中使用它（当this.$el首次可用时），如下所示：

new Vue({
  el: '#app',
  mixins: [scroller],
  mounted() {
    this.scrollToClass('.actual-date')
  }
})

这是JSFiddle：https://jsfiddle.net/ha9hm9xe/

Answer 3

在许多用例中，添加到Julien的答案中后，可以对自动动作进行动画处理，例如跳转到页面的一部分，平滑滚动可以改善ux：

el.scrollIntoView({ behavior: 'smooth' })

Answer 4

其他答案对我来说不太适用 - 我收到以下错误：cannot access property scrollIntoView of undefined。要解决此问题，您可以添加 setTimeout。

假设您想在提交表单时滚动到包含类 invalid 的第一个元素：

const someComponent {
  ...
  methods: {
    validateForm() {
      if (formValid) {
        // submit form
        ...
      } else {
        // show errors
        ...
        // and scroll to the first one
        this.scrollToInvalidField();
      }
    },
    scrollToInvalidField() {
      // Without this setTimeout, an "undefined" error is thrown.
      setTimeout(() => {
        let el = this.$el.getElementsByClassName('invalid')[0];
        el.scrollIntoView();
      }, 0);
    },
  },
  ...
}

当然，如果您想要平滑滚动，{ behavior: 'smooth' } 可以作为参数传递给 scrollIntoView() 函数，如他的回答中提到的@digout。

在Vuejs组件上向下滚动到具有类名的元素

4 个答案: