要素/ divが画面に表示されない場合のCSSの変更

Question

私のvue Webアプリケーションでは、要素の1つがスクロールして画面外に出たときにCSSクラスのヘッダーを変更しようとしています。

私はを使用して、表示方法が見つからないため、要素が表示されているかどうかを確認しています。

は、今私は動的にCSSクラスを変更するにはHTMLのコードを次ています

<div class="aClass" :class="{'bClass': isElemVisible()}"> 
    .... 
    .... 
</div> 

そして、私のVueのコードでは、私は次のような方法を追加しました：

export default { 
    name: 'myElem', 
    methods: { 
    isElemVisible() { 
     console.log($('#myDiv').visible(true)) 
     return $('#myDiv').visible(true) 
    } 
    } 
} 

これに伴う問題isElemVisibleによって返された値を動的に変更するのではなく、読み込んだときに最初の値をとり、スクロールした後でも変更されず、#myDivが画面外に出てしまった場合、これをどうやって行うか、より良い/ 。

Answer 1

問題はisElemVisible()が実行されていないということです。このメソッドは定義されており、bClassを有効にする必要があるかどうかをVueが判断する最初の時点で実行されますが、その後特にスクロールすると再び実行されません。はです。

一度しか実行されない単純なメソッドの代わりに、jquery-visibleによって返された値でスクロールして更新するboolean dataプロパティを使用することをお勧めします。

I私が何を意味するかを証明するために一緒にthis CodePenを置くが、短期でいる：

<div id="myDiv" class="aClass" :class="{'bClass': isElemVisible}"> 
</div> 

、代わりの方法のdata財産とスクロールイベントリスナーを使用します。

data() { 
    return { 
    isElemVisible: true 
    } 
}, 

created() { 
    window.addEventListener('scroll', event => { 
    this.isElemVisible = $('#myDiv').visible(true) 
    }) 
} 

Answer 2

私はあなたがこのように、スクロールイベントに耳を傾けるお勧め：https://github.com/vuejs/Discussion/issues/324