Vue路由器水平滚动到哈希不起作用

Posted 2023-02-16

【中文标题】Vue路由器水平滚动到哈希不起作用

【英文标题】：Vue Router horizontal scroll to hash not working

【发布时间】：2021-11-16 18:01:17

【问题描述】：

我想使用 button 包裹到 router-link 水平滚动视口（@98​​7654323@ 到 vue component。这适用于 anchor tags：

<a href="#about">
    <button class="btn">About</button>
</a>

但是一旦我尝试用router-link 替换它们，水平滚动就会停止工作（垂直滚动仍然有效）：

<router-link :to=" hash: 'about' ">
    <button class="btn">About</button>
</router-link>

router.js里面的这个函数负责滚动：

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

export default new VueRouter(
    mode: "history",
    routes: [...],
    scrollBehavior(to, from, savedPosition) 
        if (to.hash) 
            return window.scrollTo(top: document.querySelector(to.hash).offsetTop, behavior: 'smooth');
        
        return window.scrollTo(top: 0, behavior: 'smooth');
    
);

视口要滚动到的组件已放置在视口外的右侧，如下所示：

.about 
  position: absolute;
  transform: translateX(100%);
  height: 100vh;
  width: 100%;

编辑：

将按钮更改为：

<button @click="$router.push( hash: 'about' )">About</button>

使视口向下滚动 20% 并且仅垂直滚动，而不是水平滚动。我不知道为什么会发生这种行为。 scrollBehavior(to, from, savedPosition) console.log(to) 显示：

name: 'home', meta: …, path: '/', hash: '#about', query: …, …
fullPath: "/#about"
hash: "#about"
matched: […]
meta: 
name: "home"
params: 
path: "/"
query: 
[[Prototype]]: Object

【问题讨论】：

document.querySelector('#'+to.hash) 不是吗？

@FatimaMazhit 如果我进行此更改，我会抛出错误并且滚动停止工作

我只是指出您缺少 id 选择器。您只搜索名称为“about”的标签，但实际上您应该搜索 document.getElementById(to.hash)

如果我这样做，我会收到Error in nextTick: "TypeError: Cannot read properties of null

【参考方案1】：

尝试：

<button @click="$router.push( hash: 'about' )">About</button>

【讨论】：

我试过这样做。请看Edit Section。