发布：2024/1/10 12:54:45作者：管理员 来源：本站 浏览次数：165
自定义返回顶部组件
<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的差异
IE：
对于没有doctype声明的页面，使用 document.body.scrollTop 或 document.documentElement.scrollTop；
对于有doctype声明的页面，则使用 document.documentElement.scrollTop；
Chrome、Firefox：
对于没有doctype声明的页面，使用 document.body.scrollTop 来获取 scrollTop高度 ；
对于有doctype声明的页面，则使用 document.documentElement.scrollTop；
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、下面补充一下知识点：
当一个元素的display属性为’none’时，对该元素设置scrollTop属性是无效的，所以，即使是jQuery的scrollTop方法也会无效
参考自 博文
当scrollTop的值始终为0的时候，别着急看是不是兼容问题，先看看设置滑动的是是body，还是其他元素。
jquery的scrollTop是个方法，并不能直接(’.propertyName’).scrollTop,
同样，在赋值时也不能直接(’.propertyName’).scrollTop =
某值，而是(’.propertyName’).scrollTop(某值)。
7、解决因滚动条显隐造成页面抖动原因
将overflow设置为scroll，是滚动条一直存在
html{
overflow: scroll;
}
解决scrollTop的值是0，解决切换菜单因滚动条的显隐造成页面抖动问题
8、overflow属性的可取值有四种：visible、hidden、scroll、auto
visible：不裁剪溢出的内容。浏览器把溢出来的内容呈现在其内容元素的显示区域以外的地方，全部内容在浏览器的窗口是可见的。
hidden：将超出内容进行裁剪，不会出现滚动条。
scroll：将超出的内容进行裁剪（也就是不显示），并以滚动条的方式显示超出的内容（若不设置隐藏滚动条，滚动条一直存在）。
auto：自适应，内容如果溢出，会自动生成滚动条
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4