例如城市名称为一行按钮,点击按钮修改页面列表内容,发生滚动之后,列表吸顶,再次点击按钮,回显到最顶的可吸顶位置
步骤以下
// 1.取城市列表距顶部距离
this.scrollTop = Math.ceil(this.$refs.topRef.getBoundingClientRect().top); //topRef为dom对象的ref
// 2.mounted滚动条的获取
window.addEventListener("scroll", this.handleScrollx, true);
// 3.取城市列表的滚动距离(mounted中开启滚动监控)
handleScrollx() {
// 判断是否需要滚动,只有在滚动条在吸顶出来后菜需要滚动到指定位置
if (window.pageYOffset >= this.scrollTop) {
this.showScrollTo = true;
}
if (window.pageYOffset < this.scrollTop) {
this.showScrollTo = false;
}
},
// 4.点击事件滚动到指定的位置
this.scrollTo();
// 5.点击城市列表/如果城市列表吸顶了,则重置城市的滚动距离
scrollTo() {
if (!this.showScrollTo) return;
document.documentElement.scrollTop = this.scrollTop;
},