Using Vue js to scrollIntoView will only affect the specific element's div

Question

Using Vue js to scrollIntoView will only affect the specific element's div

I am currently working on a Vue page that consists of two divs. The Select-Div contains a list of elements, and when I click on an element from the list, the Scroll-Div is supposed to scroll to the corresponding ID element inside it. Ideally, the scrolling should position the element in the center of the Scroll-Div, where detailed information about the selected list element is displayed.

The issue I'm facing is that when I use scrollIntoView, the entire page scrolls to the center as well. This causes both the Scroll-Div and the main page to move, which is not the desired behavior.

It's important to note that the Scroll-Div includes a recursive component, so I am restricted to using IDs instead of refs.

Here is my goTo() function defined on the main page:

    goTo(id) {
      const element = document.getElementById(`Id-${id}`);

      if (element) {
         element.scrollIntoView({
           block: "center",
           behavior: "smooth",
         });
      }
    },

This function receives the emitted ID from the Select-Div and scrolls to the corresponding HTML ID within the Scroll-Div.

javascript vue.js

Answer 1

Answer №1

Using the scrollBy API can be a helpful solution for this task.

For more information, you can visit: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy

Here's an example of implementing this in a Vue 2 component:

<template>
  <div class="select-component">
    <div class="container">
      <div class="scroll-div" ref="scrollDiv">
        <p id="a">A lorem ipsum</p>
        <p id="b">B lorem ipsum</p>
        <p id="c">C lorem ipsum</p>
      </div>

      <div class="select-div">
        <button @click="goto('a')">Goto a</button>
        <button @click="goto('b')">Goto b</button>
        <button @click="goto('c')">Goto c</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goto(id) {
      let scrollDiv = this.$refs.scrollDiv;
      let el = scrollDiv.querySelector(`#${id}`);

      if (el) {
        let scrollDivRect = scrollDiv.getBoundingClientRect();
        let idRect = el.getBoundingClientRect();

        let y = scrollDivRect.y;
        let y1 = idRect.y;

        let offset = y1 - y;

        scrollDiv.scrollBy({
          top: offset,
          behavior: "smooth",
        });
      }
    },
  },
};
</script>

You can see a demo of this implementation here:

https://codesandbox.io/s/vue-scroll-to-item-on-click-for-scrollable-container-9s7xi?file=/src/components/SelectComponent.vue

Answer 2

Using the scrollBy API can be a helpful solution for this task.

For more information, you can visit: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy

Here's an example of implementing this in a Vue 2 component:

<template>
  <div class="select-component">
    <div class="container">
      <div class="scroll-div" ref="scrollDiv">
        <p id="a">A lorem ipsum</p>
        <p id="b">B lorem ipsum</p>
        <p id="c">C lorem ipsum</p>
      </div>

      <div class="select-div">
        <button @click="goto('a')">Goto a</button>
        <button @click="goto('b')">Goto b</button>
        <button @click="goto('c')">Goto c</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goto(id) {
      let scrollDiv = this.$refs.scrollDiv;
      let el = scrollDiv.querySelector(`#${id}`);

      if (el) {
        let scrollDivRect = scrollDiv.getBoundingClientRect();
        let idRect = el.getBoundingClientRect();

        let y = scrollDivRect.y;
        let y1 = idRect.y;

        let offset = y1 - y;

        scrollDiv.scrollBy({
          top: offset,
          behavior: "smooth",
        });
      }
    },
  },
};
</script>

You can see a demo of this implementation here:

https://codesandbox.io/s/vue-scroll-to-item-on-click-for-scrollable-container-9s7xi?file=/src/components/SelectComponent.vue

Using Vue js to scrollIntoView will only affect the specific element's div

Answer №1

Similar questions

What is the best way to execute synchronous calls in React.js?

Mastering asynchronous function handling in Node.js

Unraveling exceptions in Node.js akin to handling them in Java

Is there a way to filter out only the objects from the JSON data and exclude the strings?

The filter is displaying incorrect categories

Tips for navigating the material ui Expanded attribute within the Expansion Panel

"Learn the trick to concealing a modal and unveiling a different one with the power of jquery

Struggling to implement .indexOf() in conjunction with .filter()

Learning about the functions Promise.all and Array.map()

Protractor can now successfully locate and interact with a nested button element

Tips on handling a redirection request following a fetch post request

How to create select options in Angular.js without using the ng-option directive

Sophisticated web applications with Ajax functionalities and intricate layouts powered by MVC frameworks

Can JQuery be used to detect text input in real-time in a textarea field?

Adding ngChange programmatically in Angular without using attributes is a common challenge faced

Setting up a Webpack configuration for packaging a Vue component as an npm module

Navbar active class not updating on jQuery page scroll

Troubleshooting the Vue.js component rendering issue

JavaScript code to obscure

Steps for aligning the upper rectangular text in the center of the larger rectangular border