Angular ui-router滚动到顶部,而不是ui-view

Question

我刚刚升级到ui-router 0.2.8了0.2.0,我注意到当状态改变时,滚动位置会跳到te状态的顶部,ui-view这是新状态的主题.

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

1)我在页面顶部和之间有30px填充ui-view,我希望它滚动到页面顶部,留下间隙.目前,它正好位于ui-view看起来丑陋的顶部.为了实现这一点,我想我要么知道如何让它滚动到ui-view所在的div的顶部(而不是浏览器viewport),或者我需要找出如何覆盖$uiViewScroll以滚动到ui-view减去30px .

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

2)此刻它实际上并不滚动,只是跳跃.它是假设要滚动还是由开发人员来完成CSS转换？

任何帮助真的很感激:)

Answer 1

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

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所提到的,对于任何<ui-view>你不希望申请的人,只需添加即可autoscroll="false".我没有仔细研究实际的滚动实现,我只是想到我会提到装饰器的方式(它很有趣)作为替代方案.我相信你可以找出确切的滚动行为.

Answer 2

当路径发生变化时,路由器会广播一个事件:$ stateChangeSuccess即url已更改,所以只需听取它并使用jquery滚动到页面顶部

$rootScope.$on('$stateChangeSuccess',function(){
    $("html, body").animate({ scrollTop: 0 }, 200);
})

把上面的代码放在里面

yourAppName.run(function(){

    //the above code here
 })

Answer 3

所以我遇到了同样的问题.我有一个固定顶部的导航栏.如果我在ui-view中输入autoscroll ="true",它将滚动到顶部减去滚动条高度的高度.

所以我摆脱了为顶部导航栏添加填充到主体的样式

// fixed navigation at top
//body { padding-top: 100px; }

并将其应用于ui-view

[ui-view=main] {
    padding-top: 100px;
}

现在autoscroll ="true"按预期工作.

Answer 4

1)我认为它是最简单的方式来放置autoscroll="false"ui-view并操纵$viewContentLoaded事件中的滚动.

2)这是浏览器在锚点上的默认行为

Answer 5

由于$stateChangeSuccess在当前的AngularJS中似乎不再可用(如1.2.x),我将Rishul Mattas示例更改为以下内容,对我来说效果很好:

app.run(function ($rootScope) {
  $rootScope.$on('$viewContentLoaded',function(){
    jQuery('html, body').animate({ scrollTop: 0 }, 200);
  });
});