Vue一种超简单在指定滚动位置显示隐藏元素(悬浮按钮)方法

本前端仔在开发完某个项目的时候，正准备上线，突然，老板大喊：

前端仔，你快过来看，你看xxx网站，它滑下去的时候按钮就显示出来，这样不管读到哪个位置，都可以很方便地点击到按钮，给你五分钟，给我做一个出来！

我心里一阵苦闷：

啊，可是不是说好等下就要上线吗？咋又提需求了~ 哎

其实，这个需求很简单，常规操作css粘性定位或者直接监听滚动事件即可，但是为了应对变化莫测的需求:

（等会老板又改口说：这个悬浮按钮我想在这个位置显示，那个位置隐藏，没别的意思，就是玩~）

本前端仔想了想，可以监听滚动事件来实现，但是为了灵活性，也就是想在哪个位置显示，哪个位置隐藏，或者某个位置区间来控制它的显示和隐藏，有种很简单粗暴的方法可以实现：

1、监听滚动事件

2、定义两个“锚点”dom

3、利用“锚点”dom的 getBoundingClientRect 方法，与当前窗口的大小进行判断，就可以知道什么时候该显示和隐藏了

肥肠简单，下面是代码的实现：


// 悬浮按钮`
const showBtn = ref(false);
// show and hidden
const showDom = ref(null);
const hiddenDom = ref(null);
// 监听滚动(滚动到showDom时显示，到hiddenDom时隐藏)
const handleScroll = () => {
    if (showDom.value && hiddenDom.value) {
	const showRect = showDom.value.getBoundingClientRect();
	const hiddenRect = hiddenDom.value.getBoundingClientRect();
	if (showRect.top <= window.innerHeight && hiddenRect.top > window.innerHeight) {
		showBtn.value = true;
	} else {
            showBtn.value = false;
	}
  }
}
// 开始监听
onMounted(() => {
    window.addEventListener('scroll', handleScroll);
})
// 结束监听
onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
})

然后在对应位置的地方，加上 ref属性就可以了：

<template>
    <div ref="showDom" class="h-1">这里显示</div>
    <div ref="showDom" class="h-150vh">
        中间内容.......
        中间内容.......
        中间内容.......
    </div>
    <div ref="hiddenDom" class="h-1">这里隐藏</div>
</template>

好了，根据锚点dom,可以随心所欲地控制，老板爱咋样就咋样~

作者：前端炒粉仔

链接：https://juejin.cn

+友情链接