美文网首页个人收藏
vue获取滚动条位置

vue获取滚动条位置

作者: 令武 | 来源:发表于2018-07-19 14:54 被阅读0次

    <template>

            <div id=" sendOut " style="height: 200px;border: 2px solid #333;overflow-x: hidden;box-sizing: border-box;" @scroll="scroll">

                <div v-for="i in arr":key="i"style="height: 200px"> {{i}}>

                <span @click=“ send ”></span>

            </div>

    </template>

    <script>

    export default {

            name: "list",

            data() {

                return {

                    arr: [1, 2, 3, 4, 5],

                    pos: 0            }

            },

            methods: {

             // 获取滚动条与顶端距离

                scroll(event) {

                    this.pos = event.target.scrollTop

                    console.log('scroll', event.target.scrollTop)

                },

             // 点击滚动到底部

            send(){

                // 发送完滚动到底部

                        setTimeout(()=>{

                            let div = document.getElementById('sendOut');

                            div.scrollTop = div.scrollHeight; },1000)

                        }

            },

    }

    </script>

    相关文章

      网友评论

        本文标题:vue获取滚动条位置

        本文链接:https://www.haomeiwen.com/subject/xfdxyftx.html