2017-06-09 9 views
0

私はVue.jsで作業しています。ユーザーが特定のポイントを超えてスクロールすると条件付きでトップに戻るボタンを表示したいと考えています。何が間違っているのですか(JQueryはありません)?私のテンプレートでスクロールでクラスを追加するバニラJS

:私のマウント()関数

const toTop = document.getElementsByClassName('scroll').addEventListener('scroll', function() { 
    if (window.scrollY > 0) { 
    this.classList.add('shown') 
    } 
}); 
toTop(); 

答えて

1
data() { 
    return { 
    scrolled: false 
    }; 
    }, 
    methods: { 
     handleScroll() { 
     this.scrolled = window.scrollY > 0; 
    } 
    }, 
    created() { 
    window.addEventListener('scroll', this.handleScroll); 
    } 
+0

はいで

<div class="scroll"> <span class="scroll_button">Top</span> </div> 

! DOMに直接触れる必要はなく、Vueに作業をさせてください。この答えの唯一の欠点は、classnameを追加する必要のある要素に対して、 ':class =" {'shown':scrolled} "' –

関連する問題