CODEWITHSUNDEEP
cssvue.js
Diorio
Diorio

Reputation: 55

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

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?

Upvotes: 2

Views: 913

Answers (1)

Abdelillah Aissani
Abdelillah Aissani

Reputation: 3108

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>

Upvotes: 3

Related Questions