Vuejs 구성 요소의 클래스 이름을 가진 요소까지 아래로 스크롤합니다.

Vuejs 구성 요소의 클래스 이름을 가진 요소까지 아래로 스크롤합니다.

순서가 매겨지지 않은 목록이 있는 컴포넌트가 있는데 컴포넌트가 로딩되면 컴포넌트를 아래로 스크롤하여

표시할 수 있도록 클래스 이름이 'class-month'인 요소를 지정합니다.

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

ScrollIntoView를 사용할 수 있습니다.

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

여기에는 몇 가지 방법이 있을 수 있지만 재사용할 수 있도록 에 배치합니다.

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/

Julien의 답변에 덧붙여, 많은 사용 사례에서, 페이지의 한 부분으로 이동하거나 부드러운 스크롤을 하거나 하는 등의 자동화된 액션을 애니메이션화하면, ux가 향상됩니다.

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

다른 답변은 제대로 작동하지 않았습니다.다음 오류가 발생했습니다.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으로 기능합니다.

언급URL : https://stackoverflow.com/questions/47768745/scroll-down-to-element-with-a-class-name-on-vuejs-component