vue監控滾動條到達底部（獲取滾動條到達底部得距離）

原文：vue滾動條事件（獲取滾動條距離底部距離）_ kleinBlue.的博客-CSDN博客

vue

首先有滾動條的div一定要設固定高度，然后overflow:auto;出現滾動條

 

passive是使滾動更加流暢，減少卡頓

            <ul @scroll.passive="getScroll($event)" style="height: 500px;overflow-y: auto;">
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
                <li>內容內容</li>
            </ul>

                // vue中判斷滾動條滾動到底部
                getScroll(event) {
                    // 滾動條距離底部的距離scrollBottom
                    let scrollBottom =
                        event.target.scrollHeight -
                        event.target.scrollTop -
                        event.target.clientHeight;
                    console.log(scrollBottom) // 滾動到底部的距離
                    if ( scrollBottom < 0) { // 判斷滾動到底部時
                    //  操作
                    }
                },