새 페이지에서 경로를 변경해도 맨 위로 스크롤되지 않습니다
나는 경로가 바뀔 때 적어도 나에게 바람직하지 않은 행동을 발견했습니다. 자습서 http://angular.github.io/angular-phonecat/step-11/app/#/phones의 11 단계 에서 전화 목록을 볼 수 있습니다. 맨 아래로 스크롤하여 최신 중 하나를 클릭하면 스크롤이 맨 위에 있지 않고 대신 중간에 있음을 알 수 있습니다.
내 응용 프로그램 중 하나에서도 이것을 발견했으며 어떻게 이것을 맨 위로 스크롤 할 수 있는지 궁금했습니다. 나는 그것을 수동으로 할 수 있지만, 나는 모르는 다른 우아한 방법이 있어야한다고 생각합니다.
경로가 바뀔 때 맨 위로 스크롤하는 우아한 방법이 있습니까?
문제는 ngView 가 새보기를로드 할 때 스크롤 위치를 유지 한다는 것 입니다. $anchorScroll"보기가 업데이트 된 후 뷰포트를 스크롤" 하도록 지시 할 수 있습니다 ( 문서 는 약간 모호하지만 여기서 스크롤 하면 새보기 의 맨 위로 스크롤하는 것을 의미 합니다).
해결책 은 autoscroll="true"ngView 요소 에 추가 하는 것입니다.
<div class="ng-view" autoscroll="true"></div>
이 코드를 실행하십시오.
$rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {
window.scrollTo(0, 0);
});
이 코드는 저에게 효과적이었습니다. .. 저에게도 효과가 있기를 바랍니다. .. 실행 블록에 $ anchorScroll을 주입하고 아래 예제에서했던 것처럼 리스너 함수를 rootScope에 적용하기 만하면됩니다.
angular.module('myAngularApp')
.run(function($rootScope, Auth, $state, $anchorScroll){
$rootScope.$on("$locationChangeSuccess", function(){
$anchorScroll();
});
Angularjs 모듈의 호출 순서는 다음과 같습니다.
app.config()app.run()directive's compile functions (if they are found in the dom)app.controller()directive's link functions (again, if found)
RUN BLOCK 은 인젝터가 생성 된 후 실행되어 응용 프로그램을 킥 스타트하는 데 사용됩니다. 이는 새 경로보기로 리디렉션 될 때 실행 블록의 리스너가
$ anchorScroll ()
이제 새로운 라우팅 뷰로 스크롤이 맨 위로 시작하는 것을 볼 수 있습니다. :)
의 모든 조합을 시도 한 두 시간 후 ui-view autoscroll=true, $stateChangeStart, $locationChangeStart, $uiViewScrollProvider.useAnchorScroll(), $provide('$uiViewScroll', ...)예상대로, 그리고 많은 다른 사람을, 나는 스크롤 - 투 - 톱에 새로운 페이지 작업을 가져올 수 없습니다.
이것은 궁극적으로 나를 위해 일한 것입니다. pushState 및 replaceState를 캡처하고 새 페이지를 탐색 할 때만 스크롤 위치를 업데이트합니다 (뒤로 / 앞으로 버튼으로 스크롤 위치 유지).
.run(function($anchorScroll, $window) {
// hack to scroll to top when navigating to new URLS but not back/forward
var wrap = function(method) {
var orig = $window.window.history[method];
$window.window.history[method] = function() {
var retval = orig.apply(this, Array.prototype.slice.call(arguments));
$anchorScroll();
return retval;
};
};
wrap('pushState');
wrap('replaceState');
})
여기에 (견고하게) 강력하고 완전하며 (공정하게) 간결한 솔루션이 있습니다. 축소 호환 스타일과 모듈에 대한 angular.module (NAME) 액세스를 사용합니다.
angular.module('yourModuleName').run(["$rootScope", "$anchorScroll" , function ($rootScope, $anchorScroll) {
$rootScope.$on("$locationChangeSuccess", function() {
$anchorScroll();
});
}]);
추신 : 나는 자동 스크롤이 true 또는 false로 설정되었는지 여부에 영향을 미치지 않는다는 것을 알았습니다.
angularjs UI 라우터를 사용하여 내가하고있는 일은 다음과 같습니다.
.state('myState', {
url: '/myState',
templateUrl: 'app/views/myState.html',
onEnter: scrollContent
})
와:
var scrollContent = function() {
// Your favorite scroll method here
};
어떤 페이지에서도 실패하지 않으며 전역이 아닙니다.
참고로 AngularUI Router 플러그인을 사용하는 제목에 설명 된 문제를 겪는 사람에게도 참고하십시오 ...
이 SO 질문에서 묻고 대답 한 것처럼 angular-ui 라우터는 경로를 변경할 때 페이지의 맨 아래로 이동합니다.
페이지가 왜 하단에로드되는지 알 수 없습니까? 각도 UI 라우터 자동 스크롤 문제
그러나 답변에 나와있는 것처럼에 말하여이 동작을 끌 수 autoscroll="false"있습니다 ui-view.
예를 들면 다음과 같습니다.
<div ui-view="pagecontent" autoscroll="false"></div>
<div ui-view="sidebar" autoscroll="false"></div>
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view
이 자바 스크립트를 사용할 수 있습니다
$anchorScroll()
ui-router를 사용하면 (실행시) 사용할 수 있습니다
$rootScope.$on("$stateChangeSuccess", function (event, currentState, previousState) {
$window.scrollTo(0, 0);
});
이 솔루션을 찾았습니다. 새로운보기로 이동하면 기능이 실행됩니다.
var app = angular.module('hoofdModule', ['ngRoute']);
app.controller('indexController', function ($scope, $window) {
$scope.$on('$viewContentLoaded', function () {
$window.scrollTo(0, 0);
});
});
autoScroll을 true로 설정하는 것은 속임수가 아니므로 다른 솔루션을 선택했습니다. 나는 경로가 바뀔 때마다 연결되고 내장 된 $ anchorScroll 서비스를 사용하여 맨 위로 스크롤하는 서비스를 만들었습니다. 나를 위해 작동 :-).
서비스:
(function() {
"use strict";
angular
.module("mymodule")
.factory("pageSwitch", pageSwitch);
pageSwitch.$inject = ["$rootScope", "$anchorScroll"];
function pageSwitch($rootScope, $anchorScroll) {
var registerListener = _.once(function() {
$rootScope.$on("$locationChangeSuccess", scrollToTop);
});
return {
registerListener: registerListener
};
function scrollToTop() {
$anchorScroll();
}
}
}());
기재:
angular.module("mymodule").run(["pageSwitch", function (pageSwitch) {
pageSwitch.registerListener();
}]);
파티에 조금 늦었지만 가능한 모든 방법을 시도했지만 아무것도 제대로 작동하지 않았습니다. 내 우아한 해결책은 다음과 같습니다.
ui-router로 모든 페이지를 관리하는 컨트롤러를 사용합니다. 인증 또는 검증되지 않은 사용자를 적절한 위치로 리디렉션 할 수 있습니다. 대부분의 사람들은 앱 구성에 미들웨어를 넣었지만 http 요청이 필요했기 때문에 글로벌 컨트롤러가 더 잘 작동합니다.
내 index.html은 다음과 같습니다.
<main ng-controller="InitCtrl">
<nav id="top-nav"></nav>
<div ui-view></div>
</main>
내 initCtrl.js는 다음과 같습니다.
angular.module('MyApp').controller('InitCtrl', function($rootScope, $timeout, $anchorScroll) {
$rootScope.$on('$locationChangeStart', function(event, next, current){
// middleware
});
$rootScope.$on("$locationChangeSuccess", function(){
$timeout(function() {
$anchorScroll('top-nav');
});
});
});
가능한 모든 옵션을 시도했지만이 방법이 가장 효과적입니다.
위의 모든 답변은 예상되는 브라우저 동작을 위반합니다. 대부분의 사람들이 원하는 것은 "새"페이지 인 경우 맨 위로 스크롤하지만 뒤로 (또는 앞으로) 버튼을 통해 도착하면 이전 위치로 돌아가는 것입니다.
HTML5 모드를 가정한다면, 이것은 쉬운 것으로 판명되었습니다 (그러나 일부 밝은 사람들은 이것을 더 우아하게 만드는 방법을 알아낼 수 있다고 확신합니다!) :
// Called when browser back/forward used
window.onpopstate = function() {
$timeout.cancel(doc_scrolling);
};
// Called after ui-router changes state (but sadly before onpopstate)
$scope.$on('$stateChangeSuccess', function() {
doc_scrolling = $timeout( scroll_top, 50 );
// Moves entire browser window to top
scroll_top = function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
그것이 작동하는 방식은 라우터가 상단으로 스크롤한다고 가정하지만 브라우저가 완료 될 수 있도록 약간 지연시킵니다. 브라우저가 변경 내용이 뒤로 / 앞으로 탐색으로 인한 것임을 알리면 시간 초과가 취소되고 스크롤이 발생하지 않습니다.
document창 상단 전체로 이동하고 싶기 때문에 원시 명령을 사용 하여 스크롤했습니다. ui-view스크롤 만하 려면 위의 기술을 사용하여 autoscroll="my_var"제어 할 위치 를 설정 my_var하십시오. 그러나 "새"페이지로 이동하면 대부분의 사람들이 전체 페이지를 스크롤하려고한다고 생각합니다.
위의 사용 UI 라우터, 당신 불구 대신 교환에 의해 겨-경로를 사용할 수 $routeChangeSuccess에 대한 $stateChangeSuccess.
제공된 답변 중 어느 것도 내 문제를 해결하지 못했습니다. 뷰 사이에 애니메이션을 사용하고 있으며 애니메이션 후 항상 스크롤이 발생합니다. 내가 찾은 해결책은 애니메이션이 스크롤되기 전에 맨 위로 스크롤하는 것이 다음 지시문입니다.
yourModule.directive('scrollToTopBeforeAnimation', ['$animate', function ($animate) {
return {
restrict: 'A',
link: function ($scope, element) {
$animate.on('enter', element, function (element, phase) {
if (phase === 'start') {
window.scrollTo(0, 0);
}
})
}
};
}]);
다음과 같이 내 견해에 삽입했습니다.
<div scroll-to-top-before-animation>
<div ng-view class="view-animation"></div>
</div>
간단한 해결책, scrollPositionRestoration활성화 된 기본 경로 모듈에 추가하십시오 .
이처럼 :
const routes: Routes = [
{
path: 'registration',
loadChildren: () => RegistrationModule
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes,{scrollPositionRestoration:'enabled'})
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
이것을 http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate / 사용해보십시오
목록의 맨 위로 스크롤합니다. scrollTop ()
마침내 내가 필요한 것을 얻었습니다.
맨 위로 스크롤해야했지만 전환이 필요하지 않았습니다.
경로별로 라우팅 레벨에서이를 제어 할 수 있습니다.
@wkonkel에 의해 위의 솔루션을 결합하고 noScroll: true일부 경로 선언에 간단한 매개 변수를 추가 합니다. 그런 다음 전환에서 그것을 잡았습니다.
전체적으로 : 이것은 새로운 전환에서 페이지의 상단으로 이동하고, 전환 시 Forward/ 상단으로 Back이동 하지 않으며 필요한 경우이 동작을 무시할 수 있습니다.
코드 : (이전 솔루션 및 추가 noScroll 옵션)
// hack to scroll to top when navigating to new URLS but not back/forward
let wrap = function(method) {
let orig = $window.window.history[method];
$window.window.history[method] = function() {
let retval = orig.apply(this, Array.prototype.slice.call(arguments));
if($state.current && $state.current.noScroll) {
return retval;
}
$anchorScroll();
return retval;
};
};
wrap('pushState');
wrap('replaceState');
그것을 당신의 app.run블록에 넣고 주입하십시오 $state...myApp.run(function($state){...})
그런 다음 페이지 상단으로 스크롤하지 않으려면 다음과 같이 경로를 만드십시오.
.state('someState', {
parent: 'someParent',
url: 'someUrl',
noScroll : true // Notice this parameter here!
})
이것은 자동 스크롤을 포함하여 나를 위해 일했습니다.
<div class="ngView" autoscroll="true" >
참고 URL : https://stackoverflow.com/questions/21055952/changing-route-doesnt-scroll-to-top-in-the-new-page
'IT' 카테고리의 다른 글
| https.request를 사용하여 node.js에서 잘못된 자체 서명 SSL 인증서를 무시합니까? (0) | 2020.03.27 |
|---|---|
| 레일 : 콘솔에서 경로 도우미의 출력 확인 (0) | 2020.03.26 |
| WAMP 오류 : 금지됨이 서버에서 / phpmyadmin /에 액세스 할 수있는 권한이 없습니다 (0) | 2020.03.26 |
| 위도와 경도의 최대 길이는 얼마입니까? (0) | 2020.03.26 |
| UIView에 터치 이벤트를 추가하는 방법은 무엇입니까? (0) | 2020.03.26 |