Is there a way to make a css property reactive with vuejs @scroll?

Question

I'm making a vuejs component in my project, and i need to create a zoom with scroll, in a div (like googlemaps).

<div @scroll="scroll">
    <Plotly :data="info" :layout="layout" :display-mode-bar="false"></Plotly>
</div>

<style>
  div {
  transform: scale(property1);
  }
<\style>

<script>
export default {
    methods: {
        scroll(event) {
        },
    },
    created() {
        window.addEventListener('scroll', this.scroll);
    },
    destroyed() {
        window.removeEventListener('scroll', this.scroll);
    }
}
</script>

How can i make a method that make the "property1" reactive? Or there is another way to zoom with scroll only the div?

tony19 · Accepted Answer · 2022-07-15 22:13:05Z

3

you can bind a dynamic style object to your div which includes the transform property with a dynamic value (see docs for deeper explanation):

<div @scroll="scroll" :style="{ transform : `scale(${property1})`}">
      <Plotly :data="info" :layout="layout" :display-mode-bar="false"></Plotly>
</div>

new Vue({
   ...
   data() {
     return {
        property1: defaultValue
     }
   },
   methods : {
      scroll(e){
         // e is the event emitted from the scroll listener
         this.property1 = someValue
      }
   }
})

You can also add some modifiers in the template as shown in the documentation to reduce the method code (here we could be preventing the page from scrolling whenever the user will be scrolling while hovering this specific element):

<div @scroll.self.stop="scroll" :style="{ transform : `scale(${property1})`}">
      <Plotly :data="info" :layout="layout" :display-mode-bar="false"></Plotly>
</div>

edited Jul 15, 2022 at 22:13

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 19, 2019 at 8:55

Abdelillah Aissani

3,1082 gold badges12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is there a way to make a css property reactive with vuejs @scroll?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related