VUE2 如何監聽DIV中的Scroll 事件

最近的案子是PO要求UI的DIV 要有捲軸，而且要使用者拉Scroll拉到底，才會讓下面checkbox 可以讓使用打勾同意，目的就是要讓使用者強迫看完整篇文章後，才能關閉這視窗… 呵呵，好喔，我們再看vue要如何做到

一、建立DIV 要有捲軸的畫面

 要加上@scroll就可以監聽div內的schroll事件了喔~ 對就是這麼簡單!!!!，如果網有眼尖發現為何有@@小老鼠，因為我用asp.net MVC 所以要再多一個@

<div id="PupupWindow" class="dialogbackground">     <div class="PupupContent">         <div class="panel panel-info">             <div class="panel-heading popupsubject">             </div>             <div class="panel-body">                 <div contenteditable='true' class="scroll-div" @@scroll="handleBlScroll">                     HELLO TEST ABCDE1<br />                     HELLO TEST ABCDE2<br />                     HELLO TEST ABCDE3<br />                     HELLO TEST ABCDE4<br />                     HELLO TEST ABCDE5<br />                     HELLO TEST ABCDE6<br />                     HELLO TEST ABCDE7<br />                     HELLO TEST ABCDE8<br />                     HELLO TEST ABCDE9<br />                     HELLO TEST ABCDE10<br />                     HELLO TEST ABCDE11<br />                     HELLO TEST ABCDE12<br />                     HELLO TEST ABCDE13<br />                     HELLO TEST ABCDE14<br />                     HELLO TEST ABCDE15<br />                     HELLO TEST ABCDE16<br />                 </div>                                         </div>                 <div class="panel-footer text-center">                     <input type="checkbox" class="form-control" v-bind:disabled="!checkAgree" />同意                     <button id="popup-check-button" class="btn btn-primary btn-lg">確認</button>                 </div>             </div>     </div> </div>

 

二、建立監聽的事件

Index.Js

var DefaultPage = new Vue({     el: '#app',     filters: {  },     mixins: [Global],     data: { checkAgree: false }, methods: {   handleBlScroll(e) {                       if (e.srcElement.scrollTop + e.srcElement.offsetHeight >= e.srcElement.scrollHeight) { // 碰到schroll的底                 this.checkAgree = true;             } else {                 this.checkAgree = false;             }         } })

測試畫面如下: