在帮QQ群里面一个群友解决一个滚动条定位的过程中,碰到了一些问题并且解决了,写篇博客以备自己忘记了。解决滚动条定位有两种方式(目前我掌握的)

1、采用描标记的形式滚动到指定的区域。

需要跟html标签加上id属性。例如

<div class="row item-divider" id="model1"><h2>第一模块</h2></div>

然后在js脚本里面这样跳转

@H_301_18@angular.module('todo',['ionic']) .controller('TodoCtrl',function($scope,$location,$ionicSideMenuDelegate, @H_301_18@<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新手学习群,我们一起解决学习过程中遇到的问题。