Angular ui-router 滚动到顶部，而不是 ui-view [英] Angular ui-router scroll to top, not to ui-view

问题描述

我刚刚从 0.2.0 升级到 ui-router 0.2.8 并且我注意到当状态改变时，滚动位置跳转到作为新状态主题的子 ui-view 的顶部.

I've just upgraded to ui-router 0.2.8 from 0.2.0 and I've noticed that when the state changes, the scroll position jumps to the top of te child ui-view that is the subject of the new state.

这很好，但我有两个问题:

This is fine but I have two problems with it:

1) 我在页面顶部和 ui-view 之间有 30 像素的内边距，我希望它滚动到页面顶部，并留出空隙.目前它正好位于 ui-view 的顶部，看起来很难看.为了实现这一点，我想我要么需要知道如何让它滚动到 ui-view 所在的 div 的顶部(不是浏览器 viewport)，要么我需要找出如何覆盖 $uiViewScroll 以滚动到 ui-view 减去 30px.

1) I have 30px padding between the top of the page and the ui-view and I would like it to scroll to the top of the page, leaving a gap. At the moment it goes exactly to the top of the ui-view which looks ugly. To achieve this I guess I either need to know how to get it to scroll to the top of the div that the ui-view is in (not the browser viewport), or I need to find out how to override $uiViewScroll to scroll to the ui-view minus 30px.

我尝试过 $uiViewScrollProvider.useAnchorScroll(); 但如果我这样做，它根本不会滚动.我也试过 <ui-view autoscroll="false">;，它也完全停止滚动.

I have tried $uiViewScrollProvider.useAnchorScroll(); but if I do that it doesn't scroll at all. I have also tried <ui-view autoscroll="false">;, which also stops the scrolling completely.

2) 它目前实际上并没有滚动，只是跳跃.是要滚动还是由开发人员使用 CSS 转换来执行此操作?

2) It doesn't actually scroll at the moment, just jumps. Is it suppose to scroll or is it up to the developer to do this with CSS transitions?

任何帮助将不胜感激:)

Any help would really be appreciated :)

推荐答案

另一种方法是装饰默认的 $uiViewScroll 服务，有效地覆盖默认行为.

Another approach is to decorate the default $uiViewScroll service, effectively overriding the default behaviour.

app.config(function ($provide) {
  $provide.decorator('$uiViewScroll', function ($delegate) {
    return function (uiViewElement) {
      // var top = uiViewElement.getBoundingClientRect().top;
      // window.scrollTo(0, (top - 30));
      // Or some other custom behaviour...
    }; 
  });
});

正如 Hubrus 提到的，对于您不希望申请的任何 ，只需添加 autoscroll="false".我没有仔细研究实际的滚动实现，我只是想我会提到装饰器方式(它很有趣)作为替代方案.我相信您可以计算出确切的滚动行为.

And as Hubrus mentioned, for any <ui-view> you do not wish this to apply for, simply add autoscroll="false". I haven't taken a good look into the actual scrolling implementation, I just figured I'd mention the decorator way (it's alot of fun) as an alternative. I'm sure you can work out the exact scrolling behaviour.

这篇关于Angular ui-router 滚动到顶部，而不是 ui-view的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！