How to implement scrollIntoView in Vue 3 with script setup

Question

How to implement scrollIntoView in Vue 3 with script setup

Having some trouble with scrolling to a specific element when clicked. I keep getting this error message.

Uncaught TypeError: element.scrollIntoView is not a function

Here is my script

<script setup>
import { ref } from 'vue'

function goTo(refName){
    let element = ref(refName);
   element.scrollIntoView({behavior: "smooth"})
}

</script>

This is the click function

<DayWithText v-for="day in daysOfWeek" :name="day.shortHand" :day="day.day" :date="day.date"  @click.prevent="goTo('test')"/>

And here is the element causing issues

<p ref="test">test</p>

Any ideas on what might be going wrong?

javascript vue.js vuejs3 vue-composition-api js-scrollintoview

Answer 1

Answer №1

ref('test') doesn't just return

<p ref="test">test</p>

, it actually creates a new ref with the initial value of 'test' (a string).

If you want to access that paragraph, you need to declare it as:

const test = ref(null)

inside the <script setup> block (before mount is called).

After the component has been mounted, you can use the following code:

test.value?.scrollIntoView({behavior: "smooth"})

This will work as expected.

Check out the demo below:

const { createApp, ref } = Vue;
createApp({
  setup() {
    const test = ref(null);
    const goToTest = () => {
      test.value?.scrollIntoView({behavior: "smooth", block: "center"})
    }
    return {
      test,
      goToTest
    }
  }
}).mount('#app')

#app p {
  margin: 200vh 0;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4335362603706d71">[email protected]</a>/dist/vue.global.prod.js"></script>
<div id="app">
  <button @click="goToTest">Go to test</button>
  <p ref="test">test</p>
</div>

Behind the scenes, on mount, when the <template> parser encounters a ref, it searches the setup scope for the declared variable with that name. If found and if it's a ref, the current DOM element is placed in that ref's value.

Answer 2

ref('test') doesn't just return

<p ref="test">test</p>

, it actually creates a new ref with the initial value of 'test' (a string).

If you want to access that paragraph, you need to declare it as:

const test = ref(null)

inside the <script setup> block (before mount is called).

After the component has been mounted, you can use the following code:

test.value?.scrollIntoView({behavior: "smooth"})

This will work as expected.

Check out the demo below:

const { createApp, ref } = Vue;
createApp({
  setup() {
    const test = ref(null);
    const goToTest = () => {
      test.value?.scrollIntoView({behavior: "smooth", block: "center"})
    }
    return {
      test,
      goToTest
    }
  }
}).mount('#app')

#app p {
  margin: 200vh 0;
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4335362603706d71">[email protected]</a>/dist/vue.global.prod.js"></script>
<div id="app">
  <button @click="goToTest">Go to test</button>
  <p ref="test">test</p>
</div>

Behind the scenes, on mount, when the <template> parser encounters a ref, it searches the setup scope for the declared variable with that name. If found and if it's a ref, the current DOM element is placed in that ref's value.

Answer 3

Answer №2

For my scenario

const reference = ref(null);

const scrollPage = () => {
    reference.value.$el.scrollIntoView({behavior: "smooth"});
}

html

<div @click="scrollPage()">scroll to</div>
<p id="reference">Scrolled position</p>

was successful for me

Answer 4

For my scenario

const reference = ref(null);

const scrollPage = () => {
    reference.value.$el.scrollIntoView({behavior: "smooth"});
}

html

<div @click="scrollPage()">scroll to</div>
<p id="reference">Scrolled position</p>

was successful for me

Answer 5

Answer №3

This is my solution to the problem.

<script lang="ts" setup>
const scrollPage = ()=> {
    document.getElementById("upButton")?.scrollIntoView({behavior: "smooth"});
}
</script>
<template>
<div>
   <div id="upButton" class="content">
      Some random text...
   </div>
</div>
</template>

Answer 6

This is my solution to the problem.

<script lang="ts" setup>
const scrollPage = ()=> {
    document.getElementById("upButton")?.scrollIntoView({behavior: "smooth"});
}
</script>
<template>
<div>
   <div id="upButton" class="content">
      Some random text...
   </div>
</div>
</template>

Answer 7

Answer №4

When it comes to typescript, the code would look like this:

    const element = ref<null | HTMLDivElement>(null);

    element.value?.scrollIntoView({behavior: "smooth"})

Answer 8

When it comes to typescript, the code would look like this:

    const element = ref<null | HTMLDivElement>(null);

    element.value?.scrollIntoView({behavior: "smooth"})

How to implement scrollIntoView in Vue 3 with script setup

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Clicking on the anchor at the bottom of the page will smoothly navigate you to the top of the page

Remove a div element with Javascript when a button is clicked

Prevent side menu from automatically hiding when clicking on the heading

What is the process for saving an SVG element from an HTML page as a downloadable text file?

Reading an XML file to locate items nested within the same bracket

Using Angular and Typescript to implement a switch case based on specific values

Is there a way for me to showcase a collection of pictures in an array format

Vuetify vintage vibes

Using a package with `webfontloader` in NextJs for Server-Side Rendering: A guide

Do the items appear on screen only once you start typing in AngularJS?

Guide to setting up a custom js file in Laravel admin template

Interacting with Apexcharts: Exploring a Tiny Column with Hover

Adjust the size of icon passed as props in React

Spinning a CSS object around an axis

I keep encountering a parser error when making an AJAX call to retrieve JSON data. It seems to be caused by

Using Angular to automatically update the user interface by reflecting changes made in the child component back to the parent component

Guide to modifying the root directory when deploying a Typescript cloud function from a monorepo using cloud build

The search box output will be the same as the JSON result

What is the reason behind the NextJS logo not being displayed when accessing the page via its URL?

Leveraging callback functions for dynamically updating a JSON structure