在帮QQ群里面一个群友解决一个滚动条定位的过程中,碰到了一些问题并且解决了,写篇博客以备自己忘记了。解决滚动条定位有两种方式(目前我掌握的)
1、采用描标记的形式滚动到指定的区域。
<div class="row item-divider" id="model1"><h2>第一模块</h2></div>然后在js脚本里面这样跳转
angular.module('todo',['ionic'])
.controller('TodoCtrl',function($scope,$location,$ionicSideMenuDelegate,
<span style="white-space:pre"> </span>$anchorScroll,$ionicScrollDelegate) {
$scope.title = "项目信息";
$scope.menus = ["Search","Browse","Playlists"];
$scope.selectMenu = function (menu,index) {
$scope.title = menu;
$scope.toView("model"+(index+1));
$ionicSideMenuDelegate.toggleLeft(false);
}
$scope.toggleProjects = function() {
$ionicSideMenuDelegate.toggleLeft();
};
$scope.toView = function (module) {
$location.hash(module);
$anchorScroll();
//移动到锚点
};
});
$scope.toView("id"); 需要跳转到对应位置的html标签id
假如这个页面的滚动条很长,多次跳转之后就会发现页面不能上下滚动了,可能是应用标记位置之后浏览器url后面追加了##xxx=xx这样的参数导致的,如何修复不明。如有知道怎么解决的回复一下,谢谢。
2、采用修改滚动条高度。
这种方法的前提条件就是需要获取到跳转到html标签的坐标(x,y),因为只需要改变滚动条高度所以只需要获取到控件的Y轴的参数即可。
var par = document.getElementById(module);//获取到控件js对象
//先转为angularjs对象然后获取对应的参数
var top = angular.element(par).prop('offsetTop');
$ionicScrollDelegate.scrollTo(0,top);//修改滚动条位置
欢迎加入icon新手学习群,我们一起解决学习过程中遇到的问题。
