0

我正在尝试使用 hook activate、didTransition 或 willTransition，但这些都不起作用，它们什么都不做。我尝试从一条路线开始：

// app/routes/section.js
import Route from '@ember/routing/route';

export default class SectionRoute extends Route { 
  ...

  activate() { scroll(0, 0); }
}

<!-- app/templates/section.hbs -->
<h1>{{model.title}}</h1>
<p>{{model.body}}</p>
{{outlet}}
{{#each model.subsections as |s| }}
  <Section @section={{s}} />
{{/each}}

这适用于我的 js 浏览器控制台：

scroll(0, 0);

这是我的路由器

// app/router.js
...
Router.map(function() {
  this.route('docs');
  this.route('section', { path: '/docs/section/:slug' });
});

如果我将部分设为文档的子项，则它可以工作，只要我不隐藏父项的内容，但我想隐藏它。链接到组件中的锚点可能会有所帮助。

当我删除这段 css 时，它可以工作。

html {
  scroll-behavior: smooth;
}
4

1 回答 1

0

您的方法按预期工作。我创建了一个 Ember Twiddle 来验证它，你可以在这里找到它。它有两条路线。一个在激活时滚动到顶部，一个在激活时滚动到底部。它按预期滚动。

我猜如果在子路由之间转换，您可能会遇到钩子问题？一条路由被认为保持活跃，并且激活钩子没有被调用

  • 如果转换不更改路由而仅更改用于路由的动态段或查询参数，或者
  • 如果该路由的子路由之间发生转换。

如果您想在每个转换上滚动到顶部或想要进行更精细的控制，哪些转换应该触发该滚动，我建议使用routeDidChangeevent ofRouterService来代替。

于 2020-08-05T18:30:47.617 回答