Problem with horizontal scroll in vuejs

Hello,

I am having issues with triggery an event if a user scrolls horizontally on a page, I want a situation in which if the user scrolls horizontally to a div, the card name is been alerted.

Anybody can help me? There are a mistake or understanding things that I had missed.

i tried this:
v-on:scrollX=’‘indicate()’’

methods: {

indicate () {
alert(‘yes’)
}

mounted() {
document.addEventListener(‘scrollX’, this.indicate)
}

but it seems not to work.

thanks,
Mark

I think, that you don’t need to add the Eventlistener in the mounted hook. I would say, that declaring it in the section ‘v-on:scrollX’ is all you need for the event to get handled.

On what element did you add the: v-on:scrollX? I would suggest the following (but I haven’t tested it yet)

<template>
   <div class='my-component' v-on:scrollX="indicate">
      <!-- add boxes here -->
   </div>
</template>

<script>
...
function indicate(event) {
   if (event.... whatever you need to get to the x-coordinate) {
      alert('Hello World')
   }
}
</script>

I’m not sure it works though…

Cheers
Ivan

1 Like

If you want to know when a certain element is within the viewport of a scrollable area, use Intersection Observer.

1 Like

Hello @favourmark
Hope you are very well.
I’m provide some link, you can use this:-vue-horizontal-scroll - npm
Thank you

1 Like

Thanks, guys for your contributions,
so I was able to resolve the issue.

all I had to do was to target the location of each div on the screen and used
then divide the location by the scrollLeft function in javascript.

v-on:scrollX=’‘indicate()’’

methods: {

indicate () {
alert(‘yes’)
}