Vue 某区域滚动至顶部 实现吸顶效果(固定定位) / 回到顶部
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
需求介绍
1、滚动吸顶
要求蓝色框内模块滑动到头部,左侧列表固定,右侧内容块继续滚动
使用window方法 监听滚动事件:window.addEventListener()
参数1:事件类型(click、mousedown、scroll)
参数2:事件触发后调用函数
参数3:冒泡或捕获(布尔类型)
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
// 最后记得移除事件
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
//函数处理
},
}
2、实现 回到顶部功能 也是可以用 window.addEventListener()
<div v-if="isTops" id="toppings">
<img src="@/assets/serviceDesk/topping.png" alt="回到顶部">
</div>
mounted() {
window.addEventListener('scroll', this.handleScroll, true)
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll, true)
},
methods: {
handleScroll(e) {
// isTops :滚动到一定位置 展示回到顶部按钮
// timer :定时器实现滚动动画回到顶部
if (e.target.scrollTop > 1200) {
this.isTops = true
document.getElementById('toppings').addEventListener('click', function () {
var timer = setInterval(function () {
e.target.scrollTop = Math.floor(e.target.scrollTop - 5);
if (e.target.scrollTop === 0) {
clearInterval(timer);
}
},);
})
} else {
this.isTops = false
}
},
},
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)