javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(anchorScroll): only get element ids under scrollEl

Browse Source
This commit is contained in:
Andy Joslin
2014-02-09 18:02:35 -05:00
parent c2ee5e1265
commit 4c9a4c0c62
4 changed files with 84 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/ext/angular/src/service/delegates/ionicScrollDelegate.js vendored
View File

@@ -84,7 +84,7 @@ angular.module('ionic.ui.service.scrollDelegate', [])
var hash = $location.hash();
var elm;
//If there are multiple with this id, go to first one
if (hash && (elm = $document.body.querySelectorAll('#' + hash)[0])) {
if (hash && (elm = scrollEl.querySelectorAll('#' + hash)[0])) {
var scroll = ionic.DomUtil.getPositionInParent(elm, scrollEl);
scrollView.scrollTo(scroll.left, scroll.top);
} else {

72
js/ext/angular/test/anchorScroll.html Normal file
View File

@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html ng-app="ionic">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="../../../../dist/css/ionic.css" />
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
<script src="../../../../dist/js/angular/angular-animate.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<header-bar title="title" type="bar-positive">
</header-bar>
<content has-header="true">
<a ng-click="scrollTo('foo')">Click me!</a>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<div id="foo">Here you are.</div>
</content>
</div>
<script>
function MyCtrl($scope, $location, $ionicScrollDelegate) {
$scope.scrollTo = function(id) {
$location.hash(id);
console.log($location.hash());
$ionicScrollDelegate.anchorScroll();
}
}
</script>
</body>
</html>

3
js/ext/angular/test/service/delegates/ionicScrollDelegate.unit.js
View File

@@ -98,8 +98,7 @@ describe('anchorScroll', function() {
contentEl = $compile('<content></content>')(scope);
mockBody = angular.element('<div>').append(contentEl);
$document.body = mockBody[0];
del = $ionicScrollDelegate
del = $ionicScrollDelegate;
}));
it('should anchorScroll to an element with id', function() {

10
js/views/scrollView.js
View File

@@ -292,6 +292,16 @@ ionic.views.Scroll = ionic.views.View.inherit({
this.__container = options.el;
this.__content = options.el.firstElementChild;
var self = this;
//Remove any scrollTop attached to these elements; they are virtual scroll now
//This also stops on-load-scroll-to-window.location.hash that the browser does
setTimeout(function() {
if (self.__container && self.__content) {
self.__container.scrollTop = 0;
self.__content.scrollTop = 0;
}
});
this.options = {