设置滚动条的滚动距离

1. html

<div ref="myDiv" @scroll="scrollNode('myDiv')"></div>

2. css

.warp {
    display: inline-block;
    overflow-y= auto;
    line-height: 0;
    border: 1px solid #bbb;
    border-radius: 3px;
}
::-webkit-scrollbar {
    height: 2px;
}

3. js

data() {
    return {
	showScrollTop: 0
    }
},
methods: {
    // 鼠标滚动事件
    mouseScroll(item) {
	if (this.$refs[item].scrollTop === this.showScrollTop) {	    
            return false
        } else if (this.$refs[item].scrollTop > this.showScrollTop) {	    
            this.showScrollTop = this.showScrollTop + 滚动距离	    
            this.$refs[item].scrollTop = this.showScrollTop 
        } else if (this.$refs[item].scrollTop < this.showScrollTop) {	    
            this.showScrollTop = this.showScrollTop - 滚动距离   
            this.$refs[item].scrollTop = this.showScrollTop	 
        }
    }
}

注意事项:

1. 记得设置line-height: 0

2. 计算好滚动距离和子元素之间的关系(通常相等)

3. 同级跟随btn, 记得设置vertical-align: bottom

参考:

blog.csdn.net/weixin\_422…