监听页面滚动，滚动到哪个区域，哪个标识高亮展示——js技能提升

- 日理万妓 2022-09-16 11:22 214阅读 0赞

最近在做电商前台页面时，需要实现一个类似于锚点的功能，点击某个标识，则页面滚动到对应的区域，相对应的，页面滚动时，也要根据滚动到的内容区域，展示对应的区域标识高亮。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16]  
根据上面的描述，可以看到功能可以拆解为两个：

# 1.页面滚动到某个区域，对应的区域标识高亮 #

要实现此功能，则需要监听页面的滚动功能：

在页面挂载的时候监听页面的滚动，在页面销毁时移除页面滚动的监听

mounted() { 
       window.addEventListener('scroll', this.getScroll);
    },
    destroyed() { 
        window.removeEventListener('scroll', this.getScroll);
    },

# 2.页面滚动的函数 #

监听页面的滚动的距离：`window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop`,为了页面的兼容性，可以通过多种方式进行获取滚动距离。

getScroll() { 
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= this.JTop) { 
            this.JFlag = 1;
        }
        if (scrollTop >= this.XTop) { 
            this.JFlag = 2;
        }
    },

上面中的`JTop`和`XTop`就是对应的区域距离页面顶部的距离。这两个参数可以在表格渲染时，获取。  
上面的`JFlag`的数值决定了哪个标识高亮。

# 3.获取对应区域的`top`值——`getBoundingClientRect()`来获取 #

this.$nextTick(() => { 
        var Jdom = this.$refs.jieCls;
        var Xdom = this.$refs.xieCls;
        this.JTop = Jdom.getBoundingClientRect().top-90;
        this.XTop = Xdom.getBoundingClientRect().top-90;
    })

具体数值，可以根据实际情况微调。

# 4.点击区域标识时，页面滚动到相应区域——`document.documentElement.scrollTop`来处理滚动位置 #

scrollTop(val) { 
        var top = 0;
        if (val == 'J') { 
            top = this.JTop;
            this.JFlag = 1;
        } else { 
            top = this.XTop;
            this.JFlag = 2;
        }
        console.log('页面滚动到', top);
        document.documentElement.scrollTop = top;
    },

完成！！！

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/a20356ab2bba4c2d91246a91af8ad36c.png