モーダル内のスクロール位置を初期位置にリセットしたい

Question

モーダルウィンドウ内でスクロール後、一度モーダルを閉じ、再度開いた時にモーダルのスクロールをリセットし初期位置に戻したい。

scrollTop()は試しましたが、モーダルエリア外のスクロールとなってしまいました。

ソースは以下になります。

ご教授宜しくお願い致します。

[HTML]

<div id="app">
    <button v-on:click="openModal">Click</button>

    <div class="modal__overlay" v-show="showContent" v-on:click="closeModal" v-cloak>
        <div class="modal__content" v-on:click.stop="doThis">
            <p>モーダル内のコンテンツ、モーダル内のコンテンツ、モーダル内のコンテンツ〜</p>
            <button v-on:click="closeModal">close</button>
        </div>
    </div>
</div>

[CSS]

.modal__overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:1;
    cursor: pointer;
}
.modal__content{
    z-index:2;
	width:50%;
	height: 70vh;
	padding: 1em;
	font-size: 1.6rem;
    background:#fff;
	cursor: default;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

[JS]

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue ({
    el: '#app',
    data: {
        showContent: false
    },
    methods:{
        openModal(){
            this.showContent = true
        },
        closeModal(){
            this.showContent = false
        }
    }
})
</script>

Answer 1

こんにちは。

Vue はあまり詳しくないのですが、以下のようにしてはどうでしょうか。

<div class="modal__content" ref="modal__content" v-on:click.stop="doThis">

        closeModal(){
            this.$refs.modal__content.scrollTop = 0;
            this.showContent = false
        }

Comments

[mccandless]

Lhankor_Mhy様、ありがとうございます。上記を参考に解決致しました。
ref属性の使い方がわかっておりませんでした。
大変助かりました。お礼申し上げ致します。ありがとございました。