深圳网站建设 响应式设计开发,登陆空间商网站,免费下载app软件官网,深圳市浩天建设网站三个常用方案#xff1a;1.scrollintoView 把调用该方法的元素滚动到屏幕的指定位置#xff0c;中间#xff0c;底部#xff0c;或者顶部 优点#xff1a;方便#xff0c;只需要获取元素然后调用 缺点#xff1a;不好精确控制#xff0c;只能让元素指定滚动到中间…三个常用方案1.scrollintoView 把调用该方法的元素滚动到屏幕的指定位置中间底部或者顶部 优点方便只需要获取元素然后调用 缺点不好精确控制只能让元素指定滚动到中间顶部底部没法设置偏移 block可以设置为centerendstart等来控制在页面显示的位置。 注意的就是
script setup
import {onMounted, ref } from vue
import {useRoute }from vue-router
const { query } useRoute();
const target query.target
onMounted((){document.getElementById(target)?.scrollIntoView({block:center;
})
/scripttemplatebutton美妆/buttonbutton数码/buttonbutton美食/buttonbutton家居/buttonbutton黄金/buttondiv classhome idhome// 五个楼层div classpart idpart1美妆/divdiv classpart idpart2数码/divdiv classpart idpart3美食/divdiv classpart idpart4家居/divdiv classpart idpart5黄金/div/div
/templatestyle
.home {width: 1000px;margin: 0 auto;height: 90vh;overflow-y: scroll;
}
.part {margin-top: 20px;border: 1px solid red;height: 600px;
}
.needData {height: 600px;
}
/style
2.scrollTo 把可滚动元素滚动到指定xy坐标优点:可以精确控制到具体多少px 缺点得先获取到xy坐标 需要注意的是这个方法的调用者并不是要看到的元素而是可滚动的元素。像方法一调用scrollintoView方法的是五个楼层本身但是如果是调用scrollTo的话是调用他们的父级元素idhome的div盒子它才是可滚动的元素.
script setup
import {onMounted, ref } from vue
import {useRoute }from vue-router
const { query } useRoute();
const target query.target
onMounted((){const targetDom document.getElementById(target);const targetRect targetDom.getBoundingClientRect();document.getElementById(home)?.scrollTo(targetRect.x, targetRect.y - 100);
})
/scripttemplatebutton美妆/buttonbutton数码/buttonbutton美食/buttonbutton家居/buttonbutton黄金/buttondiv classhome idhomediv classpart idpart1美妆/divdiv classpart idpart2数码/divdiv classpart idpart3美食/divdiv classpart idpart4家居/divdiv classpart idpart5黄金/div/div
/template
3.scrollBy 滚动指定的xy距离。也就是让他滚动一定距离不指定坐标 优点:当我们只是做移动而不是滚到某个指定的元素时 缺点:得自己算出多少距离 这个方法用的少就不举例了
最后要注意的点记住这么几个操作 1如果是打开就滚动到指定位置vue/react项目一定要在你页面数据渲染完成后滚动 2如果不含有请求记得在onMounted(vue)或者useEffect(react)中进行滚动操作如果是页面滚动可能还要在加一个小延迟setTimeout 3如果页面的数据是请求来的请确保数据渲染完成后进行滚动
页面滚动是会记录上一次滚动状态的在页面渲染好后又会滚回去。记录页面滚动这个现象一般只限于同步引入的组件异步的不会没有滚动记录
