ui-router 및 Angularjs를 사용하여 TOP로 자동 스크롤
저는 이 문제에 대한 많은 문제를 읽어왔지만, 주어진 솔루션 중 제 사용 사례에 맞는 것은 하나도 없는 것 같습니다.처음에는 모든 링크에 target="_top"을 붙이는 것만으로 시작했지만, 실제로는 앱을 새로고침 할 수 없게 되어 버렸습니다.autoscroll="true"를 사용한다고 하는 사람도 있지만, 이 기능은 제 UI 뷰 내에서만 작동하는 것 같습니다.
이 문제의 문제는 내 index.html 파일에 첫 번째 UI 뷰보다 위에 고정된 네비게이션 및 기타 정적 요소가 있다는 것입니다.즉, 다른 페이지로 이동하면 페이지가 해당 요소를 지나 로딩될 때 네비게이션이 손실됩니다.몸에 붙이는 것도 해봤어요
<body autoscroll="true">
</body>
이것 역시 아무 효과가 없는 것 같다.문제는 어떻게 하면 새로운 페이지(ui-router로부터의 새로운 루트 변경)가 페이지 상부에서 시작되도록 할 수 있는가 하는 것입니다.감사합니다!
항상 크로스 브라우저 0으로 스크롤하려면 자동 스크롤을 사용하지 마십시오.이것을 실행 블록에 배치합니다.
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
버전 1.0.6을 사용하여$stateChangeSuccess이 이벤트는 을 위해 권장되지 않습니다.$transitions서비스.다음은 상태가 변경될 때마다 맨 위로 스크롤하는 데 사용한 코드입니다.
app.run(['$transitions', function ($transitions) {
$transitions.onSuccess({}, function () {
document.body.scrollTop = document.documentElement.scrollTop = 0;
})
}]);
루트 변경 시 내비게이션 바를 고정하고 페이지 로딩이 부분적으로 페이지 아래로 스크롤되는 것과 같은 문제가 있었습니다.
방금 덧붙였습니다.autoscroll="false"로.ui-view다음과 같은 경우:
<div ui-view="main" autoscroll="false"></div>
편집하다
방금 이 방법을 시험해봤는데, 좀 엉터리 해킹이지만, 효과가 있어요.각도 서비스 가져오기$anchorScroll&$location관련 컨트롤러에 접속하여 UI를 검출합니다..state설정을 실시합니다.다음으로 a를 사용합니다.$watch온 UI의$stateParams부르다$location.hash('top');루트/스테이트 변경 시.
https://docs.angularjs.org/api/ng/service/$anchorScroll
https://docs.angularjs.org/api/ng/service/$location#hash
.controller('myCtrl', function ($location, $anchorScroll, $scope, $stateParams) {
$scope.$watchCollection('$stateParams', function() {
$location.hash('top');
$anchorScroll();
});
});
여기에는 Angular 서비스가 있습니다.https://docs.angularjs.org/api/ng/service/$anchorScroll
샘플 코드:
.run(function ($rootScope, $state, $stateParams, $anchorScroll) {
$rootScope.$on('$stateChangeStart', function () {
$anchorScroll();
});
});
특정 요소로 스크롤하려면
.run(function ($rootScope, $state, $stateParams, $anchorScroll) {
$rootScope.$on('$stateChangeStart', function () {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
});
});
UI 라우터를 사용하고 있습니다.내 주행은 다음과 같습니다.
.run(function($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
})
나는 다른 두 가지 답을 조합해야 했다.
<div ui-view autoscroll="false"></div>
와 조합하여
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
주의: 이것은 UI 라우터의 v0.2.15에 있습니다.
$locationChangeStart에서 @TaylorMac의 예외 답변과 동일한 작업을 수행했습니다.
index.run.syslog:
$rootScope.$on('$locationChangeStart', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});언급URL : https://stackoverflow.com/questions/26444418/autoscroll-to-top-with-ui-router-and-angularjs
'programing' 카테고리의 다른 글
| angular-loader.js의 용도는 무엇입니까? (0) | 2023.04.01 |
|---|---|
| 스프링 부트 및 MongoDB 접속 상세 설정 방법 (0) | 2023.04.01 |
| JSON.stringify() 출력의 늘 값을 숨깁니다. (0) | 2023.04.01 |
| 재료-ui 자동완료 경고 자동완료에 제공된 값이 잘못되었습니다. (0) | 2023.04.01 |
| JSON을 프로그램적으로 아름답게 하려면 어떻게 해야 하나요? (0) | 2023.04.01 |