2019年10月28日更新。
之前用的方法类似于用jq直接操作dom的方法。而在vue的思想中,vue希望开发人员可以专注与业务逻辑和数据的开发(ViewModel),避免直接操作到dom。所以,以下是改进的方法。
1.首先我先创建一个类名,并且添加样式,.z-scroll{ background-color: #0052ff; }
然后在data里面定义一个属性data () { return { isScroll: false } },
然后使用动态添加类名的方法给这个滚动条添加动态样式
<div class="head-search head-search-zindex" :class="{'z-scroll':isScroll}">
js的方法代码如下:
mounted () {
/* 监听滚动条事件 */
let _this = this
window.onscroll = function () {
_this.handleScroll()
}
},
methods: {
handleScroll () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
if (scrollTop > 20) {
this.isScroll = true
} else {
this.isScroll = false
}
}
}
本质上看这和下面的方法是一样的效果,但是实质上却是两种不同的思想,个人还是建议使用上面的这种方法。
----------------------------------------------------------------------------------------------------------分割线
1.首先你要明白是哪一个元素产生了滚动条,要监听的就是这一个滚动条的元素
举个例子,当滚动条滚动的时候,我将会改变这个id为search-scroll的背景颜色,那么我将要监听产生滚动条的元素。
产生滚动条的元素的如下:
可以看到它的id为wrapper-scroll,那么方法如下:
mounted(){
var scrooll = document.getElementById('wrapper-scroll')
// addEventListener() 方法用于向指定元素添加事件句柄。
scrooll.addEventListener('scroll', this.handleScroll)
},
methods:{
handleScroll () {
var scrooll = document.getElementById('wrapper-scroll') // 获取滚动条的元素
var scrollup = document.getElementById('search-scroll') // 获取要改变背景的元素
// 当滚动到距离顶部20px时,返回顶部的锚点显示,scrollTop为元素滚动条内的顶部隐藏部分的高度
if (scrooll.scrollTop >= 20) {
scrollup.style.backgroundColor = '#0052ff' // 改变背景颜色
} else {
scrollup.style.backgroundColor = 'transparent' // 恢复正常
}
}
}
结果如下,但滚动隐藏的高度大于20px的时候,背景颜色就改变了。