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.

https://i.sstatic.net/D1LED.png

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

How do server side cookies and javascript cookies interact with each other?

Implement a callback function to dynamically generate variables and display them within an HTML element

Vuetify's paginated server-side datatable does not support client-side sorting

Utilizing React, generate buttons on the fly that trigger the display of their respective

Utilize variable as both a function and an instance of a class

Cause: Trying to serialize an `object` that is not JSON serializable (such as a "[object Date]"). Ensure that only JSON serializable data types are returned

What are the common issues that arise when creating a library with Vue CLI?

Feeling uncertain about Node, NPM, Bower, and how to set them up for Bootstrap?

Retrieving data in [slug].js using Reactjs

Having trouble getting my HTML file and CSS styles to render properly in Chrome

I received no response when I checked my Discord messages

Encounter an issue during npm installation of electron: "Error verifying the initial certificate."

Steering clear of inserting 'Array' into a database through autocomplete using Js, Ajax, and Json

When the child element's "aria-expanded" attribute is set to true, a CSS class should be dynamically

Triggering AWS Lambda functions with SQS

In ReactJS, when passing an array of objects to a child component, the first instance may sometimes return as undefined, causing the code to break

Why is receiving input value in React not successful?

Displaying a hand cursor on a bar chart when hovered over in c3.js

Issue with React / Express failing to route links accurately

Leveraging AngularJS $promise in conjunction with NgResource