Javascript 仅在my Vue.js router- 的某些页面上滚动到页面顶部;在其他屏幕上保持滚动位置相同
在主页上,我想在新的Vue(转换)视图中导航到我的一个页面。 用户在“关闭”此页面时,会返回到上次滚动的位置 这是通过将Vue本机scrollBehavior添加到VueRouter来实现的 这就是我要去的地方:Javascript 仅在my Vue.js router- 的某些页面上滚动到页面顶部;在其他屏幕上保持滚动位置相同,javascript,vue.js,Javascript,Vue.js,在主页上,我想在新的Vue(转换)视图中导航到我的一个页面。 用户在“关闭”此页面时,会返回到上次滚动的位置 这是通过将Vue本机scrollBehavior添加到VueRouter来实现的 这就是我要去的地方: const router = new VueRouter({ scrollBehavior: (to, from, savedPosition) => new Promise((resolve) => { const position = savedPosition
const router = new VueRouter({
scrollBehavior: (to, from, savedPosition) => new Promise((resolve) => {
const position = savedPosition || {};
if (!savedPosition) {
if (to.hash) {
position.selector = to.hash;
}
if (to.matched.some((m) => m.meta.scrollToTop)) {
position.x = 0;
position.y = 0;
}
}
router.app.$root.$once('triggerScroll', () => {
router.app.$nextTick(() => resolve(position));
});
}),
routes,
[]
然而这意味着在主页上向下滚动将导致在新页面上的相同滚动位置结束
我想防止这种情况发生。新页面在y=0时打开。但是不重置主页上的上一个滚动位置
因此,当单击back按钮时,它会将用户发送回主页上单击的元素的滚动位置
你知道我怎样才能做到这一点吗?我在我的主视图组件中添加了以下内容,而不是干扰滚动行为:
export default {
[..]
activated() {
window.scrollTo(0, this.scrollposition);
console.log("scrolling to this.scrollposition = " + this.scrollposition);
},
beforeRouteLeave(to, from, next) {
this.scrollposition = window.pageYOffset;
next();
}
};
这会在您转到另一页时保存位置,并将scrollposition恢复到视图再次激活时的状态
在案例研究页面上,我添加了:
activated() {
window.scrollTo(0, 0);
}
…以便在“打开”时将其滚动到顶部
似乎在所有现代浏览器中都能完美地跨平台工作
对我来说足够好了。希望其他人对此有所帮助。:)