H5中列表滚动之后分类条的吸顶回显

时间：2021-08-11 19:18:10 阅读：14 评论：0 收藏：0 [点我收藏+]

例如城市名称为一行按钮，点击按钮修改页面列表内容，发生滚动之后，列表吸顶，再次点击按钮，回显到最顶的可吸顶位置

技术分享图片

步骤以下

// 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;
    },
 

H5中列表滚动之后分类条的吸顶回显

原文：https://www.cnblogs.com/ywz-boke/p/15129714.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)