お世話になっております。
今回はvueを使ってwindowスクロールと同期して要素を横方向に動かしたいと考えています。
windowのスクロールでscrollYの値が変わっている所は確認できていますが、styleObjectが更新されず横方向に動いてくれません。
v-bindしているので更新されると思っていたのですが動かず困っています。
アドバイスお願い致します。
コード
** template **
html
1<template> 2 <div> 3 4 <!-- 動かしたい要素 --> 5 <div class="sec1"> 6 <div class="bottom-back" v-bind:style= "styleObject"></div> 7 </div> 8 9 <!-- scrollYの値表示 --> 10 <div class="content"> 11 <span>{{ scrollY }}</span> 12 </div> 13 14 </div> 15</template> 16
** script **
js
1 2<script> 3export default { 4 name : 'Scroll', 5 data : function() { 6 return { 7 scrollY:0, 8 styleObject:{ 9 transform: 'translateX('+ this.scrollY +'px)', 10 }, 11 } 12 }, 13 mounted() { 14 window.addEventListener('scroll', this.handleScroll); 15 }, 16 methods: { 17 handleScroll() { 18 this.scrollY = window.scrollY; 19 } 20 }, 21} 22</script>
** css **
<style lang="scss" scoped> .bottom-back{ height: 7vh; width: 100%; opacity: 10; bottom: 2vh; position: fixed; background-image: url("~@/assets/image/top_page_1.png"); background-size: contain; } .content { min-height: 300vh; background-color: #E7E7E7; } .content span{ position: fixed; background-color: #fff; } </style>
ご教授お願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/24 09:21
2019/06/24 09:42 編集
2019/06/24 09:41
2019/06/25 01:31