UI 뷰가 아닌 맨 위로 스크롤하는 각도 UI 라우터

UI 뷰가 아닌 맨 위로 스크롤하는 각도 UI 라우터

I've just upgraded to 로 업그레이드한 지 얼마 안 됐어요.ui-router 0.2.8부에서0.2.0그리고 상태가 변경되면 스크롤 위치가 하위 태 리 고 뀌 크 게 and child'의 that면 the롤 when가 i teve로위 changes, position state of jumps되위을는 te스맨ui-view그것은 새로운 국가이다.새로운 주의 대상입니다.

이것은 문제 없습니다만, 다음의 2개의 문제가 있습니다.

1) 페이지 상단에 있는 30px 패딩 이 부 부 이p and있 i have다니) between the of패습 the the 30 pagep이x사 30윗페 1에윗딩분과분지ui-view그리고 페이지 맨 위에 스크롤하고 싶습니다.페이지 맨 위로 스크롤해서 띄어쓰기를 원합니다.은 정확히 '위로.ui-view이것을 하려면 , 브라우저가 아니고, UI 뷰가 있을 .viewport을 알아내야 .) 또는 오버라이드 방법을 합니다$uiViewScrollui-viewxxx 30펜스.

는 ★★★★★★★★★★★★★★★★★★★★★★.$uiViewScrollProvider.useAnchorScroll();렇렇하하하하하전전전안돼돼돼돼돼돼돼 。<ui-view autoscroll="false">;이치노

2) 실제로는 스크롤이 되지 않고 점프를 합니다.스크롤을 해야 합니까?아니면 CSS의 이행으로 이것을 실행하는 것은 개발자에게 달려 있습니까?

어떤 도움이라도 정말 감사합니다:)

다른 인 '보다 낫다'를 꾸미는 것입니다.$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...
    }; 
  });
});

그리고 휴브러스가 언급한 것처럼,<ui-view>은 하고 않으시면 그냥 .autoscroll="false"실제 스크롤 실장에 대해서는 자세히 검토하지 않고, 대신 데코레이터 방식(재미있음)을 언급하고 싶다고 생각하고 있습니다.나는 네가 정확한 스크롤 동작을 알아낼 수 있다고 확신한다.

경로가 변경될 때마다 라우터가 이벤트를 브로드캐스트합니다.$ stateChangeSuccess(예: URL이 변경되었으므로 이를 듣고 jquery를 사용하여 페이지 맨 위로 스크롤하십시오.

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

상기의 코드를 내부에 입력하다

yourAppName.run(function(){

    //the above code here
 })

그래서 저도 같은 문제가 있었어요.나는 고정식 내비게이션 바를 가지고 있다.UI 보기에 autoscroll="true"를 입력하면 맨 위로 스크롤하여 스크롤 바 높이에서 높이를 뺀 높이로 이동합니다.

그래서 상판 네비게이션 바디에 패딩을 덧대던 스타일을 없앴습니다.

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

그리고 그것을 ui뷰에 적용했다.

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

이제 autoscroll="true"가 예상대로 작동합니다.

1)합니다.autoscroll="false"합니다.$viewContentLoaded

2) 이것은 브라우저의 앵커 기본 동작입니다.

부터$stateChangeSuccess현재 AngularJS(1.2.x)에서는 사용할 수 없는 것 같습니다.Rishul Mattas의 예를 다음과 같이 변경했습니다.

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

맨 위에 놓기

<div id="top">.....

스크롤할 코드:

$rootScope.$on('$stateChangeStart', function() {
    $anchorScroll('top');
});

Angular + Material Design(각도 + 재료 설계)을 결합하는 경우 맨 위로 스크롤하려면 이 작업도 필요합니다.

app.run(function ($rootScope) {
    $rootScope.$on('$viewContentLoaded', function () {
        $("md-content").animate({ scrollTop: 0 }, "fast"); /* <------- Notice this line */
        jQuery('html, body').animate({ scrollTop: 0 }, 200);
    });
});

네비게이션 상태가 어린이 상태일 경우 맨 위로 스크롤할 필요가 없다고 생각하기 때문에 다음과 같이 썼습니다.

$rootScope.$on('$stateChangeSuccess',function(_, _, _, os){
    if(!$state.includes(os) || $state.is(os))
        $("html, body").animate({ scrollTop: 0 }, 200);
});

대부분의 경우 페이지 맨 위로 스크롤하는 것만으로는 충분하지 않습니다.앵커 링크를 존중하고 로케이션의 해시에 의해 지정된 로드된 콘텐츠의 특정 위치로 스크롤하는 것이 항상 좋습니다.

이 전략을 구현하기 위해 사용하는 코드는 다음과 같습니다.

module.run(function (
  $rootScope,
  $timeout,
  $location,
  $uiViewScroll
) {

  // Scrolling when screen changed.
  $rootScope.$on('$viewContentLoaded', function () {
    $timeout(performAutoScroll, 0);
  });


  function performAutoScroll () {
    var hash = $location.hash();
    var element =
         findDomElement('#' + hash)
      || findDomElement('a[name="' + hash + '"]')
      || angular.element(window.document.body)
    ;
    $uiViewScroll(element);
  }
});

$viewContentLoadedAngular가 콘텐츠를 로드했을 때 생성되는 이벤트입니다.ui-view요소.실제로 코드를 다음 다이제스트 사이클로 이동하려면 코드 실행을 연기해야 합니다.이렇게 하면 뷰 요소의 내용이 실제로 DOM 트리에 배치되므로 조회할 수 있습니다. $timeout이 목적을 위해 지연이 0인 트릭이 사용됩니다.

$uiViewScrollUI 라우터에서 제공하는 서비스는 실제로 스크롤을 수행하는 데 사용됩니다.jQuery/jqLite 요소를 전달하면 맨 위 테두리까지 스크롤됩니다.

올바른 해시를 취득하고 있습니다.$location서비스를 제공하고 이를 사용하여 DOM 트리 내에서 적절한 요소를 찾습니다.이 두 가지 요소가 있을 수 있습니다.id속성 또는 링크name기여하다.스크롤할 요소를 찾을 수 없는 경우 다음 페이지로 돌아갑니다.body（ 예 : 지맨예예예예예예예예 ）

★★★★★★★★★★★★★★★★.findDomElement되어 있습니다하다

/**
 * @param {string} selector
 * @returns {jQuery|null}
 */
function findDomElement (selector) {
  var result = $(selector);
  return (result.length > 0 ? result : null);
}

나는 이 접근법이 이치에 맞고 밖에 있는 누군가에게 유용하기를 바란다.건배!

이를 조건부로 뷰에서 수행할 경우 다음과 같이 컨트롤러 뷰에 배치할 수 있습니다.

.state('exampleState', {
    url: '/exampleURL',
    controller: 'ExampleCtrl as examplectrl',
    onEnter: function($rootScope) {
            $rootScope.$on('$viewContentLoaded',function(){
            jQuery('html, body').animate({ scrollTop: 0 }, 200);
        });
    }
}).

또는 필요에 따라 상태를 유지합니다.cleaner 파일 클리너에서는 위의 내용을 컨트롤러에 배치되어 있습니다.

function ExampleCtrl ($scope, $rootScope) {

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

이게 도움이 됐으면 좋겠는데, 제가 뭔가 놓친 게 있으면 알려주세요.나는 후자를 사용했고 나에게 잘 어울린다.

언급URL : https://stackoverflow.com/questions/22290570/angular-ui-router-scroll-to-top-not-to-ui-view