const topHeight = ref(402);//侧边栏初始高度
onMounted(() => {
window.addEventListener("scroll", scrollTop, true);
const scrollTop = () => {
let scroll = document.documentElement.scrollTop || document.body.scrollTop;
console.log("网页正文全文高",document.body.scrollHeight);
topHeight.value = 402 - Math.floor(scroll / Math.floor(document.body.scrollHeight/173));
1. 使用watch
监听
import { defineComponent, watch } from "
vue
";
import { useRoute } from "
vue
-router";
export default defineComponent({
setup() {
const route = useRoute();
watch(() => route.path,(newPath, oldPath) => {
console.log(newPath)
this.$nextTick(() => {
const el = document.querySelector('.act-not');
const offsetHeight = el.offsetHeight;
el.onscroll = () => {
const scrollTop = el.scrollTop;
const scrollHeight = el.scrollHeight;
if ((offsetHeight + scrollTop) - scrollHeight >= -1) {
// 需要执行的代码
坑：在做滚动加载分页时候，有时候第三
handleScrollx() {
(document.querySelector('.el-drawer__wrapper') as any).style.top = 176 - window.pageYOffset + 'px';
mounted() {
window.addEventListener('scroll', this.handleScrollx, true);
beforeDestroy()...
在
Vue
3中，可以通过在watch回调函数中获取组件的$refs属性并调用其方法来实现
滚动条
回到顶部的功能。具体方法如下：
1. 在组件中使用ref指令给需要
监听
的DOM元素添加一个引用，例如：
<template>
<div ref="container">
// 页面内容
</template>
2. 在watch回调函数中获取该引用并调用其scrollTop属性将
滚动条
置顶，例如：
<script>
export default {
watch: {
//
监听
数据
变化
data(newValue, oldValue) {
// 获取DOM元素引用
const container = this.$refs.container;
// 将
滚动条
置顶
container.scrollTop = 0;
</script>
这样，在数据
变化
时，watch回调函数会被触发，从而获取组件的$refs属性并调用其scrollTop属性，将
滚动条
回滚到顶部。
