경로 변경 시 스크롤 위치를 재설정하는 방법은?
저는 Angular JS와 처음 몇 시간을 보내고 그것으로 SPA를 작성하려고 합니다.그러나 경로 변경 시 스크롤 위치는 경로 변경 후 현재 위치를 유지합니다.이것은 만약 누군가가 2페이지의 텍스트의 반을 다 읽는다면, 이 사람은 두 번째 페이지로 바뀐 후 2페이지가 되었을 때 페이지의 중간에 있게 된다는 것을 의미합니다.(페이지 길이가 동일하게 긴 것을 감안하면)
제가 해결책을 찾을 때, 사람들은 그 반대만을 요구합니다. 즉, 일단 페이지를 바꾸면 스크롤 위치를 변경하고 싶어하지 않습니다.하지만 그마저도 재현하지 못했습니다.Angular JS의 개발이 이것보다 앞서고 제가 상담한 소스가 구식인지 궁금합니다.
문제를 보여주는 최소 버전을 만들었습니다(단순히 두 개의 파일을 추가).sample1.html그리고.sample2.html사용할 수 있도록 랜덤 컨텐츠를 제공합니다.)
<!DOCTYPE html>
<html>
<head lang="en"><title>SPA sample</title></head>
<body data-ng-app="myApp">
<div style="position: fixed;">
<a href="#/">Main</a>
<a href="#/other">Tutorial</a>
</div>
<div data-ng-view=""></div>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-route.min.js"></script>
<script>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'noOp',
templateUrl: 'sample1.html'
})
.when('/other', {
controller: 'noOp',
templateUrl: 'sample2.html'
})
.otherwise({redirectTo: '/'});
});
myApp.controller('noOp', function ($scope) { });
</script>
</body>
</html>
에 의하면ngView 설명서:
autoscroll(옵션) 문자열:
ngView가 $anchorScroll을 호출하여 뷰가 업데이트된 후 뷰포트를 스크롤할지 여부.
그래서 당신이 해야 할 일은 당신의 것을 바꾸는 것입니다.ng-view호출하여 다음과 같이 자동 스크롤을 켭니다.
<div ng-view autoscroll></div>
각 경로 변경 후 이벤트가 발생합니다.$rootScope:$routeChangeSuccess. 가장 기본적인 시나리오에서는 이 이벤트를 듣고 스크롤 위치를 다시 설정합니다.(0,0):
$rootScope.$on("$routeChangeSuccess", function(){
window.scrollTo(0,0);
})
좀 더 고급의 경우, 각 url에 대해 url을 떠나기 전 마지막 위치를 저장할 수 있습니다. 그런 다음 다음 작업을 수행해야 합니다.$routeChangeStart뿐만 아니라.매우 원시적으로, 저장이 가능했습니다.$rootScope그 자체이지만, 저는 JS 해시 객체를 사용하고 대신 단순한 각도값으로 유지하는 것을 선호합니다.마지막 위치를 영구적으로 저장해야 하는 경우(예:localStorage), 그러면 각도 서비스를 사용하는 것을 고려해 볼 수 있습니다.
언급URL : https://stackoverflow.com/questions/22779753/how-to-reset-scroll-position-on-a-route-change
'source' 카테고리의 다른 글
| oracle : where 절의 함수가 결과를 필터링한 나머지 모든 where 절 이후에만 호출되도록 하는 방법? (0) | 2023.10.02 |
|---|---|
| 최대 절전 모드 자동 증가가 데이터베이스에 설정되지 않음 (0) | 2023.10.02 |
| 문자열(PowerShell)의 HTML 특정 문자를 벗어나는 가장 좋은 방법은 무엇입니까? (0) | 2023.10.02 |
| 이 인라인 블록 요소는 왜 아래로 밀려나 있는 것입니까? (0) | 2023.10.02 |
| GCC 출력을 stdout으로 만드는 방법? (0) | 2023.09.27 |