跨平台开发框架Ionic学习之路------4(使用angularjs实现滚动条定位)

最新推荐文章于 2026-05-25 13:07:24 发布

原创最新推荐文章于 2026-05-25 13:07:24 发布 · 3.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#phonegap #angularjs #cordova

Ionic学习专栏收录该内容

3 篇文章

订阅专栏

本文介绍了两种滚动条定位的方法：一种是使用锚点定位，通过设置HTML元素ID并结合JavaScript进行跳转；另一种是通过获取目标元素的位置直接调整滚动条位置。文章还探讨了解决多次跳转后页面无法滚动的问题。

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

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

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

<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新手学习群,我们一起解决学习过程中遇到的问题。