【bug】table重新加载数据,页面滚动条下沉到底部,记录scrollTop后将其恢复scrollTop出现闪烁
1.table数据请求前记录scrollTop
$scope.scrollPos = document.documentElement.scrollTop;
2.html中添加指令repeat-finishi
<tr ng-repeat="item in lists" class="repeat-finish">
3.写入指令
AppDirective.directive('repeatFinish', function () {
return {
restrict: "C",
link: function (scope, element, attr) {
if(scope.$last === true){
$(document).scrollTop(scope.scrollPos);
}
}
}
});
当指令检测到DOM已经渲染好(scope.$last === true表示repeat渲染完成)立即恢复之前记录的scrollTop,这样从table加载好到恢复scrollTop就接近无延迟,闪烁的情况消失了。
注:如果有滚动条定位偏差(angular表达式编译完成呈现视图前后引起的折行,页面高度会发生变化,所以定位有差别。虽然scope.$last === true表示了遍历完成,但是页面重绘并没有完成,主要是数据绑定的显示),在link里面加个setTimeout();这是会闪烁一下;
闪烁这个现象暂时没有找到完美的解决办法,有大佬想到什么办法的话,欢迎@,E-mail: dxdleikai@163.com
后续:(已经找到解决办法)
指令修改为如下:
AppDirective.directive('repeatFinish', function ($parse) {
return {
restrict: "CA",
link: function (scope, element, attr) {
if(scope.$last === true){
var watchLast = scope.$watch('lastHashKey', function(newValue, oldValue) {
$(document).scrollTop(scope.scrollPos);
});
scope.$on('$destroy', function() {
watchLast();
});
}
}
}
});
控制器需要在更新数据列表后添加:
$scope.lastHashKey = $scope.tableList[$scope.tableList.length - 1].$$hashKey)
完美解决
【bug】table重新加载数据,页面滚动条下沉到底部,记录scrollTop后将其恢复scrollTop出现闪烁的更多相关文章
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题
在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...
- table+ajax加载数据
//ajax加载notice $(function() { //${pageContext.request.contextPath}/ /** var res = [ {noticeTitle:'必答 ...
- 使用 jQuery Ajax 在页面滚动时从服务器加载数据
简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据
1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...
- 【重大bug】viewpager使用的时候加载数据应该在setOnPageChangeListener里加载
[重大bug]viewpager使用的时候加载数据应该在setOnPageChangeListener里的onPageSelected里加载,我说怎么首页有数据,第二页就是空白,就是加载了但是数据不显 ...
- Ajax页面的加载数据与删除
1.数据库找一张表: 颜色表2.主页面主页面的代码用到tbody:TBODY作用是:可以控制表格分行下载,从而提高下载速度.(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部 ...
随机推荐
- javascript中变量命名规则
前言 变量的命名相对而言没有太多的技术含量,今天整理有关于变量命名相关的规则,主要是想告诉大家,虽然命名没有技术含量,但对于个人编码,或者说一个团队的再次开发及阅读是相当有用的.良好的书写规范可以让你 ...
- 关于配置cordova的一些细节
网上多数资料都是:安装nodejs->通过node js安装cordova->JDK->设置环境变量JAVA_HOME->安装android SDK->设置环境变量AND ...
- 笔记: SpringBoot + VUE实现数据字典展示功能
最近一直在写前端,写得我贼难受,从能看懂一些基础的代码到整个前端框架撸下来鬼知道我经历了啥(:´д`)ゞ 项目中所用到的下拉菜单的值全部都是有数据库中的数据字典表来提供的,显示给用户的是的清晰的意思, ...
- FPGA小白学习之路(2)error:buffers of the same direction cannot be placed in series
锁相环PLL默认输入前端有个IBUFG单元,在输出端有个BUFG单元,而两个BUFG(IBUFG)不能相连,所以会报这样的错: ERROR:NgdBuild:770 - IBUFG 'u_pll0/c ...
- 达拉草201771010105《面向对象程序设计(java)》第七周学习总结
达拉草201771010105<面向对象程序设计(java)>第七周学习总结 实验七继承附加实验 实验时间 2018-10-11 1.实验目的与要求 (1)进一步理解4个成员访问权限修饰符 ...
- TOMCAT封装DBCP
## 数据源 ## #Tomcat封装的DBCP: >> 基本知识: tomcat在默认情况下已经集成了DBCP: >> JNDI: |-- 基本概念: 在tomcat启动的时 ...
- html/css系列 BFC
本文详情:https://www.cnblogs.com/chen-... 第一种 BFC中的盒子对齐 <div class="container"> <div ...
- web前端性能优化的技巧
1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...
- 没想到MySQL还会问这些...
前言 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 在前一阵子,大哥问过我:"你知道MySQL的原子性是怎么保 ...
- 有关js的date的相关知识
最近做项目,用了new Date().getTime()获取本地时间,但是如果用户篡改了手机时间,程序漏洞明显暴露.所以如果为保证程序的稳健安全性,应该是要使用网络时间的,也就是服务器时间.原理就是使 ...