Question

我正在使用Vue.js 2.3.3和vue-router 2.5.3。我创建了一个Navbar组件，其中包含指向着陆页上特定部分的书签（或链接），如下所示：

<router-link to="/#our-services" class="nav-item item is-tab">
    Our Services <!-- Jumps to #our-services on the home page -->
</router-link>

我通过以下方式定义了路由器：

export default new VueRouter({
    routes, // routes are defined in a var above...
    mode: 'history',
    scrollBehavior(to, from, savedPosition) {
        if (to.hash) {
            return { selector: to.hash }
        } else {
            return { x: 0, y: 0 }
        }
    },
    linkActiveClass: 'is-active'
})

现在，这似乎有效;如果我点击导航栏中的“我们的服务”链接，它会跳转到#our-services。的然而：

如果我滚离#our-services div元素，再次点击“我们的服务”链接，则不会将我带回div;点击链接不会产生任何结果;
此外，即使您滚动离开该部分，<a>的{{1}}元素也会保留router-link类。最好跟踪你在页面上的位置并适当调整链接上的is-active类。

有关如何解决这两个问题的任何建议？我应该在第二种情况下听滚动事件吗？谢谢！

Answer 1

无论你的滚动对象是什么（可能是window），你都应该添加一个事件监听器来处理滚动事件：

window.addEventListener('scroll', scrollHandler, false);

您的scrollhandler函数应该检查当前窗口位置是否有哈希，如果是，请检查关联元素是否超出范围，如果是，请清除哈希值。

我无法在代码段中使用真实位置哈希或窗口，但这是您想要做的事情。

let hash = '#second';
const scrollingEl = document.querySelector('.scrollingArea');

function handleScrollEvent() {
  if (hash) {
    const winY = scrollingEl.scrollTop;
    const hashElY = document.querySelector(hash).getBoundingClientRect().top;
    
    if (hashElY < 0 || hashElY > winY + scrollingEl.height) {
      hash = '';
    }
    console.log(winY, hashElY);
  }
}

scrollingEl.addEventListener('scroll', handleScrollEvent, false);

.scrollingArea {
  height: 400px;
  overflow-y: scroll;
}

.scrollingArea>div {
  height: 250px;
}

<div class="scrollingArea">
  <div id="first">First</div>
  <div id="second">Second</div>
  <div id="third">Third</div>
  <div id="fourth">Fourth</div>
</div>

一旦用户滚动离开锚点部分，如何“重新激活”链接？

1 个答案: