2016-07-28 3 views
1

인 요소로 스크롤하여 Angular 1.x에서 ionic 2/Angular2로 $ anchorScroll을 수행 할 수 있습니까?

페이지의 요소로 스크롤하려고합니다. 메신저가 바로 그 일을하는 경우 나는, https://github.com/Nolanus/ng2-page-scroll

확실하지 NG2 페이지 스크롤 같은 시도 내가 튜토리얼을 통해 다음과 오류가있어 :

ParseError: 'import' and 'export' may appear only with 'sourceType: module' 

내가 생각 최신 이온 2 나던 작업 더 이상 릴리스. 더 쉬운 방법이 있다면 좋을까요?

답변

0

동일한 상황에서 버튼을 한 번 클릭 할 때마다 다음 페이지/요소로 스크롤하고 싶었습니다.

내가 언급 한 것과 동일한 옵션을 살펴본 결과, 이온 슬라이드 (http://ionicframework.com/docs/v2/api/components/slides/Slides/)에서 방향을 '수직'으로 설정할 수 있다는 것을 알았습니다.이 방향이 나를 위해 속임수였습니다.

유스 케이스가 도움이 될지 모르겠다.

그렇지 않으면 Content 및 scrollTo 함수를 살펴볼 수 있습니다. http://ionicframework.com/docs/v2/api/components/content/Content/

+0

그러나 * ngFor와 함께 많은 JSON 정보를 다루고 있는데, 슬라이드를 사용하면 성능 문제가 발생할 수 있습니다. 하지만 당신의 대답은 ionic2와 가장 가까운 해결 방법이라고 생각합니다. scrollTo는 내가 그것을 사용할 때 저장소와 "마지막으로 본"스크롤 위치를로드 할 때만 작동합니다 ... 요소의 위치를 ​​얻지 못했기 때문에 다른 장치/화면 크기의 유체 레이아웃이 목적을 이길 것입니다 ...하지만 제안은 thx입니다. . –

4

이 문제가 계속 직면하는 경우 나도 몰라,하지만이 상, 우, 왼쪽으로 해당 요소의 경계를 돌려줍니다 YourHTMLelement.getBoundingClientRect()를 사용하여 해결할 수 있습니다.

그걸로 contentscrollTo(left, top, duration) 기능을 사용할 수 있습니다. 내가 보이는 특정 요소에 세로로 스크롤하는 함수를 만들어 같은 :

scrollToElement(id) { 
    var el = document.getElementById(id); 
    var rect = el.getBoundingClientRect(); 
    // scrollLeft as 0px, scrollTop as "topBound"px, move in 800 milliseconds 
    this.content.scrollTo(0, rect.top, 800); 
} 

그러나 당신이 scrollLeft에 매개 변수를 사용하여, 당신은 또한 가로로 스크롤 할 방법을 변경할 수 있습니다.

+1

'el.getBoundingClientRect()'에 문제가있어 신뢰할 수없는 결과가 있습니다. 간단한 'el.offsetTop'은 나를위한 트릭입니다. –