vue3.2返回顶部自定义组件(分析scrollTop是0及因滚动条造成页面抖动)

自定义返回顶部组件

<template>
    <div  class="affix">
        <div class="back-to-top" v-show="isshow" >
            <i class="iconfont icon-fanhuidingbu" @click="onBackToTop"></i>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import {ref,onMounted} from 'vue'
    const isshow = ref(false)
    onMounted(()=>{
        window.addEventListener("scroll", (e) => {
            const scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrolltop >= 50) {
                isshow.value = true;
            }
            if (scrolltop == 0) {
                isshow.value = false;
            }
        });
    })
    function onBackToTop () {
        let top = document.documentElement.scrollTop //获取点击时页面的滚动条纵坐标位置
        const timeTop = setInterval(() => {
            document.documentElement.scrollTop = top -= 50 //一次减50往上滑动
            if (top <= 0) {
                clearInterval(timeTop)
            }
        }, 30) //定时调用函数使其更顺滑
    }
</script>

<style scoped lang="scss">
    .affix {
        position :fixed;
        z-index :999;
        bottom :40px;
        right :40px;
        background-color: rgba(255, 60, 0, 1);
        .back-to-top {
            width :40px;
            height: 40px;
            border-radius: 0;
            transition :none;
            display: flex;
            justify-content: center;
            align-items: center;
            &:hover{
                transform: scale(1.5);
            }
            i {
                font-size: 18px;
                color: rgba(255,255,255,0.8);
            }
        }
    }
</style>

把封装的组件最好放在app.vue里面

<template>
   <my-affix></my-affix>
  <router-view />
</template>

问题：

1：document.documentElement.scrollTop的含义：

scrollTop：指滚动条距离顶部的距离，如果不滚动，则document.documentElement.scrollTop一直是0；一旦滚动，document.documentElement.scrollTop的值就是距离顶部的距离

2：开发过程碰到document.documentElement.scrollTop一直是0的问题

原因是：
父页面设置了属性overflow，

overflow-y:scrool  //或
overflow:hidden  

会导致document.documentElement.scrollTop一直是0，去掉或改为overflow-y:visible就好了

3、DTD 的问题

页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement.scrollTop。
页面没有DTD，即没指定DOCTYPE时，使用document.body.scrollTop。

4、各浏览器下 scrollTop的差异

1. IE：

对于没有doctype声明的页面，使用 document.body.scrollTop 或 document.documentElement.scrollTop；
对于有doctype声明的页面，则使用 document.documentElement.scrollTop；

2. Chrome、Firefox：

对于没有doctype声明的页面，使用 document.body.scrollTop 来获取 scrollTop高度 ；
对于有doctype声明的页面，则使用 document.documentElement.scrollTop；

3. Safari:

safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset ；

5、解决办法

因此，为了兼容所有浏览器，封装一个函数，去获取页面向上卷曲出去的距离和向左卷曲出去的距离

 left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
 top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

6、下面补充一下知识点：

1. 当一个元素的display属性为’none’时，对该元素设置scrollTop属性是无效的，所以，即使是jQuery的scrollTop方法也会无效
   参考自 博文
2. 当scrollTop的值始终为0的时候，别着急看是不是兼容问题，先看看设置滑动的是是body，还是其他元素。
3. jquery的scrollTop是个方法，并不能直接(’.propertyName’).scrollTop,
   同样，在赋值时也不能直接(’.propertyName’).scrollTop =
   某值，而是(’.propertyName’).scrollTop(某值)。

7、解决因滚动条显隐造成页面抖动原因

将overflow设置为scroll，是滚动条一直存在

html{
    overflow: scroll;
}

解决scrollTop的值是0，解决切换菜单因滚动条的显隐造成页面抖动问题

8、overflow属性的可取值有四种：visible、hidden、scroll、auto

1. visible：不裁剪溢出的内容。浏览器把溢出来的内容呈现在其内容元素的显示区域以外的地方，全部内容在浏览器的窗口是可见的。
2. hidden：将超出内容进行裁剪，不会出现滚动条。
3. scroll：将超出的内容进行裁剪（也就是不显示），并以滚动条的方式显示超出的内容（若不设置隐藏滚动条，滚动条一直存在）。
4. auto：自适应，内容如果溢出，会自动生成滚动条