경로를 변경해도 새 페이지의 맨 위로 스크롤되지 않음
루트가 바뀌었을 때 적어도 나에겐 바람직하지 않은 행동을 발견했어.튜토리얼 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
};
어느 페이지에서도 실패하지 않고 글로벌하지 않습니다.
참고로 Angular를 사용하고 있는 (저와 마찬가지로) 제목에 기술된 문제를 발견했을 경우UI 라우터 플러그인...
이 SO 질문의 질문과 답변에서 알 수 있듯이 루트를 변경하면 angular-ui 라우터가 페이지 맨 아래로 이동합니다.
페이지가 맨 아래에 로드되는 이유를 알 수 없습니까?Angular 자동
이 알 수 '아, 아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아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 . ui . displays . state . sui : ui - 뷰
UI 라우터를 사용하는 경우 (실행 중)를 사용할 수 있습니다.
$rootScope.$on("$stateChangeSuccess", function (event, currentState, previousState) {
$window.scrollTo(0, 0);
});
이 Javascript를 사용할 수 있습니다.
$anchorScroll()
나는 이 해결책을 찾았다.새 보기로 이동하면 기능이 실행됩니다.
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 요청이 필요했기 때문에 글로벌 컨트롤러가 더 잘 작동합니다.
my 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');
});
});
});
가능한 모든 방법을 시도해 봤는데, 이 방법이 가장 효과적이에요.
솔루션, 「」, 「」를 합니다.scrollPositionRestoration활성화 되어 있습니다.
다음과 같이 합니다.
const routes: Routes = [
{
path: 'registration',
loadChildren: () => RegistrationModule
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes,{scrollPositionRestoration:'enabled'})
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
위의 모든 답변은 예상된 브라우저 동작을 방해합니다.대부분의 사용자가 원하는 것은 "새로운" 페이지일 경우 맨 위로 스크롤하고 뒤로(또는 앞으로) 버튼을 사용하여 이전 위치로 돌아가는 것입니다.
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;
}
라우터는 선두까지 스크롤하는 것으로 상정하고 있습니다만, 브라우저가 종료할 수 있도록 조금 지연됩니다.그런 다음 브라우저가 변경 내용이 Back/Forward 내비게이션에 의한 것임을 알리면 타임아웃이 취소되고 스크롤은 발생하지 않습니다.
생으로 했어요.document전체 창 상단으로 이동하려면 스크롤해야 합니다.만약 당신이 단지 당신의ui-view스크롤하여 설정하다autoscroll="my_var"컨트롤 할 수 있는 곳my_var상기의 기술을 사용해 주세요.하지만 '새로운' 페이지로 이동한다면 대부분의 사람들이 페이지 전체를 스크롤하고 싶어할 것입니다.
위에서는 ui-router를 사용하지만 스왑을 통해 ng-route를 대신 사용할 수 있습니다.$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>
http://ionicframework.com/docs/api/service/$ionicScrollDelegate/ 를 사용해 보세요.
리스트의 선두까지 스크롤 합니다.
나는 마침내 내가 필요로 하는 것을 얻었다.
맨 위로 스크롤해야 하는데, 그렇지 않은 전환이 있었으면 합니다.
이것은 루트 단위로 제어할 수 있습니다.
위 솔루션을 @wkonkel로 조합하고 간단한 솔루션을 추가합니다.noScroll: trueparameter를 지정합니다.그럼 과도기에 그걸 포착했군요.
전체:이것은 새로운 이행시에 페이지 맨 위로 이동하지만, 위에는 이동하지 않습니다.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
'sourcecode' 카테고리의 다른 글
| PHP로 cURL이 뭐죠? (0) | 2022.11.27 |
|---|---|
| 수집이 비어 있는지 Larabel 확인 (0) | 2022.11.26 |
| '\r' 이스케이프 시퀀스의 용도는 무엇입니까? (0) | 2022.11.26 |
| 왜 python은 루프 뒤에 'else'를 사용하는가? (0) | 2022.11.26 |
| 목록에 항목이 있는 경우 어떻게 삭제합니까? (0) | 2022.11.26 |