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) { // 判断滚动到底部时
                    //  操作
                    }
                },