I am developing a vuejs component for my project and I am looking to implement a zoom functionality on scroll within a div, similar to Google Maps.
<div @scroll="zoomOnScroll">
<Plotly :data="info" :layout="layout" :display-mode-bar="false"></Plotly>
</div>
<style>
div {
transform: scale(zoomLevel);
}
<\style>
<script>
export default {
data() {
return {
zoomLevel: 1
};
},
methods: {
zoomOnScroll(event) {
// Implement zoom logic here
},
},
created() {
window.addEventListener('scroll', this.zoomOnScroll);
},
destroyed() {
window.removeEventListener('scroll', this.zoomOnScroll);
}
}
</script>
Is there a way to make the "zoomLevel" property reactive when implementing the zoom functionality? Alternatively, is there another method to achieve zooming on scroll within the div?