How can I make a div scroll by a precise number of pixels using Vue?

Question

How can I make a div scroll by a precise number of pixels using Vue?

In my Vue2 app, I attempted to scroll up a div by 10px using the following method:

this.$refs.hello.scrollTo({ top: 10, left: 0, behavior: "smooth"});

Unfortunately, instead of scrolling up by 10px, it scrolls all the way to the top. How can I scroll to a specific height?

Check out this example on CodeSandbox: https://codesandbox.io/s/youthful-blackwell-wl5x6?file=/src/components/HelloWorld.vue:531-630

javascript vue.js vuejs2

Answer 1

Answer №1

One effective approach is to scroll to the current scrollHeight of the reference element once the list has been updated.

Example

new Vue({
  el: '#app',
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    let i = 0;
    for (i = 0; i < 19; i++) {
      this.list.push(i);
    }
  },
  methods: {
    addItem() {
      this.list.push(0);
      setTimeout(() => {
        const targetTop = this.$refs.hello.scrollHeight;
        this.$refs.hello.scrollTo({
          top: targetTop,
          left: 0,
          behavior: "smooth",
        });
      })
    },
  }
})

.hello {
  overflow-y: auto;
  height: 200px;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
  <div class="hello" ref="hello">
    <h1>{{ msg }}</h1>
    <div v-for="item in list" :key="item">
      <div style="margin-bottom: 20px">{{ item }}</div>
    </div>
    <button @click="addItem">add</button>
  </div>
</div>

Answer 2

One effective approach is to scroll to the current scrollHeight of the reference element once the list has been updated.

Example

new Vue({
  el: '#app',
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    let i = 0;
    for (i = 0; i < 19; i++) {
      this.list.push(i);
    }
  },
  methods: {
    addItem() {
      this.list.push(0);
      setTimeout(() => {
        const targetTop = this.$refs.hello.scrollHeight;
        this.$refs.hello.scrollTo({
          top: targetTop,
          left: 0,
          behavior: "smooth",
        });
      })
    },
  }
})

.hello {
  overflow-y: auto;
  height: 200px;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
  <div class="hello" ref="hello">
    <h1>{{ msg }}</h1>
    <div v-for="item in list" :key="item">
      <div style="margin-bottom: 20px">{{ item }}</div>
    </div>
    <button @click="addItem">add</button>
  </div>
</div>

How can I make a div scroll by a precise number of pixels using Vue?

Answer №1

Similar questions

Debugging Vue with Jest

Every checkbox on the Angular 6 platform has been chosen

The function URL.createObjectURL() is not recognized in Nuxt

Dealing with unresolved promises in async/await functions

Issues with AngularJS dirty validation for radio buttons not being resolved

Modifying the content of JSON key values

"Ways to retrieve an array of dates within a specified range of date and time

Utilizing a Json.Net object within an Ajax request

What is the correct location to store the bower.json file?

What are the limitations of using a JS file within an Angular application?

JavaScript inheritance through prototypes and the properties of objects

Adding new elements to a list with Jquery, seamlessly integrating them without the need to

No feedback received from JSON

Using angularjs to include content from other files is known as

How to modify values in a JSON array using JavaScript

Troubleshooting Timeout Problems with Selebiun Crawler in C#

Variable type linked to interface content type

Execute the script using ajax

Accessing a subcollection with DocumentSnapshot in Firebase using JS9

Tips for adjusting the placeholder color in Material UI using React JS