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

What is the correct way to establish and terminate a MongoDB connection in a Node.js application?

Tips for splitting JavaScript files into smaller chunks using Vue CLI 3 and the webpack performance object

Can someone show me how to implement arrow functions within React components?

Guide to importing a JSON file into Vue.js and HTML

PHP script encountering difficulty inserting data into database when AJAX is utilized; functions flawlessly without AJAX

Experiencing unexpected behavior with React Redux in combination with Next.js and NodeJS

Include an item in a Vuetify model's array of objects

Unlocking the attributes of Angular form elements: A guide

Persistent error function arises from Ajax request in Laravel

Angular 6 tutorial: Creating a dynamic side navigation bar with swipe and drag functionality using Angular Material/Bootstrap

Access an external URL from JSON data simply by utilizing VueJS

Issues with NodeJs Express routes execution

Updating a Div on your webpage using a JQuery UI dialog: A step-by-step guide

How to insert an image into a toolbar within a Vue + Vuetify SFC

What are some techniques for preventing Null Pointer Exception errors?

Issues with jQuery Ajax functionality in Rails application not achieving successful completion

Angular JS: Grabbing Text from a Specific div and Copying it to Clipboard

Preventing Page Scroll While New Data is Loading

Converting a string date format to UTC: A step-by-step guide

Executing a function on a dropdown menu in AngularJS