offset ui-router autoScroll

Question

I am using ui-router's autoScroll to scroll down to a div (ui-view) when page loads/route change. It currently does so. Is there any way to offset autoScroll? I need to leave 100px above the element visible for menu and am confused on how to acchomplish this.

app.directive('scrollTop', function($uiViewScroll) {

        var linker = function (scope, element, attr, $elm) {
            $uiViewScroll(element);
        };

        return {
            restrict: 'A',
            link: linker
        }
   });

HTML:

<ui-view [autoscroll="true"]/>

score 0 · Accepted Answer · answered Jan 11 '17 at 14:20

autoscroll directive allows you to set the scroll behavior of the browser window when a view is populated.

By default, $anchorScroll is overridden by ui-router's custom scroll service, $uiViewScroll. This custom service let's you scroll ui-view elements into view when they are populated during a state activation.

Try to decorate the default $uiViewScroll service, 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...
    }; 
  });
});

See http://corpus.hubwiz.com/2/angularjs/22290570.html

offset ui-router autoScroll

1 Answers1