角UI路由器滚动到顶部，而不是用户界面视图 [英] Angular ui-router scroll to top, not to ui-view

问题描述

我刚刚升级到 UI路由器0.2.8 从 0.2.0 和我注意到当状态发生变化，滚动位置跳到德子的顶部用户界面视图这是新状态的主题。

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）我在页面的顶部，并与30像素填充的用户界面视图，我想它滚动到页面的顶部，留下一个缺口。目前，它究竟去到用户界面视图看起来丑陋的顶部。要做到这一点我想我要么需要知道如何得到它滚动到该UI的观点是在div的顶部（不是浏览器视），或我需要找出如何重写 $ uiViewScroll 滚动到用户界面视图减去30像素。

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（）; 但如果我这样做，它根本不滚动。我也曾尝试＆LT;用户界面视图自动滚屏=假取代; ，这也完全停止滚动

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?

任何帮助真的会AP preciated：）

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提到的，对于任何＆LT; UI的视图＆gt; 你不希望这个申请，只需添加自动滚屏=假。我没有采取良好的外观到实际的滚动功能，我只是想我会提装饰的方式（这是很多乐趣）作为替代。我敢肯定，你可以计算出准确的滚动行为。

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.

这篇关于角UI路由器滚动到顶部，而不是用户界面视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！