‘壹’ angularjs 如何监控div滚动条，我想做当div的滚动条拉倒最上面的时候动态加载数据
加载jquery插件 ebooking_fs换要浮divid
‘贰’ js监听两个滚动条，JavaScript、Html
尝试用一下其中的id, 不要直接用 $('div')。
你要监控第一个，用 $('div.showError').scroll(...)；
监控第二个，就用 $('div.showAll').scroll(...)；
‘叁’ 为什么监控画面有两条黑条在上下滚动
一般情况是前端安装的摄像机有问题，可以先关闭摄像机的电源试下，如果不行只有更换前端安装的摄像机了。也不排除连接线路问题，主要是视频线，可以试下将BNC接口重新焊接一下。
‘肆’ 如何用js监听滚动条滚动事件
js监视滚动事件的函数是onscroll
js语法：element.onscroll = functionReference
html语法：<elementonscroll="myScript">
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<style>
#container{
position:absolute;
height:auto;
top:0;
bottom:0;
width:auto;
left:0;
right:0;
overflow:auto;
}
#foo{
height:1000px;
width:1000px;
background-color:#777;
display:block;
}
</style>
</head>
<body>
<divid="container">
<divid="foo"></div>
</div>
<scripttype="text/javascript">
//js绑定你需要监控滚动事件的dom，也可以绑定document.body监控整个网页滚动
//也可以监控具体的dom滚动，像下面的containerId对象
document.getElementById('container').onscroll=function(){
console.log("scrolling");
};
</script>
</body>
</html>
‘伍’ “angularjs”怎么监听滚动条
如果你是用的jQuery2.0以上版本，还需要修改ng-infinite-scroll.js程序，将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(elem).xxx。AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
拓展：
1、AngularJS 是一个JavaScript 框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到 HTML 页面。AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。
2、AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。
3、AngularJS试图成为WEB应用中的一种客户端的解决方案。这意味着它不只是你的WEB应用中的一个小部分，还是一个完整的客户端的解决方案。这会让AngularJS在构建一个CRUD(增加Create、查询Retrieve、更新Update、删除Delete)的应用时显得很"固执"(原文为 opinionated,意指没有太多的其他方式)。但是，尽管它很"固执"，它仍然能确保它的"固执"只是在你构建应用的起点，并且你仍能灵活变动。
‘陆’ 前端页面需要用到多处scroll滑动事件，怎么事件之间不影响
原因分析:
ios的webview 内核 设定了其在进行momentum scrolling(弹性滚动)时,会停止所有的 事件响应 及 DOM操作引起的页面渲染 (亲测),故 onscroll 不能实时响应
曾做兼容方案:
使用 ontouchmove 去替代 nscroll ,虽然能更频繁的触发事件,但是这边的项目需求是实时响应滚动事件的同时,还要对页面元素进行重定位的DOM操作,由上述原因可知,在滚动过程中,页面会停止一切关于DOM方面的操作,所以若使用 ontouchmove 去实现的话,在按住屏幕进行滑动的时候,屏幕会出现元素抖动的情况(事件触发与DOM操作间具有几十毫秒的时间差),兼容失败
使用 iscroll 的probe版本,该版本能实时探查到滚动的距离,但该钩子函数是实时去关注 requestAnimationFrame 下的状态,所以对浏览器的版本性能消耗很大,加上 react 的 DOM 操作,安卓机根本动不了,兼容失败
使用 swiper 插件,在启动 freeMode 模式时模拟原生的弹性滚动( swiper 模拟原生滚动的方案能兼容较多的安卓机型不出现bug,推荐), 因为 swiper 没有实时监听滚动位置的功能,故我监听滚动开始及结束后的事件,通过 setInterval 及一些计算去实现滚动条的监听,但因为 react 元素的变化量比较大,导致 swiper 在移动端时对父容器的计算速率达到了一个瓶颈,依旧出现很卡顿的现象,兼容失败
fallback方案,安卓端使用原生onscroll实现,ios直接加载全部子元素,毕竟ios的性能方面还是比较好的,有更好的方案后续再更.
‘柒’ js如何控制整个页面滚动条的位置
有两种方法。
1、通过div的scrollTop变动控制垂直滚动条位置。通过div的scrollLeft变动控制水平滚动条位置。
示例：
<body>
//d1是外层div，带滚动条
<div id='d1' style='height:200px;width:100px;overflow:auto;background:blue;'>
<div style='height:500px;width:500px;background:yellow'>2222</div>
</div>
</body>
<script>
document.getElementById('d1').scrollTop=100;//通过scrollTop设置滚动到100位置
document.getElementById('d1').scrollLeft=200;//通过scrollTop设置滚动到200位置
</script>
2、用html锚点
如下：
<ahref="#test">aaaaa</a>
<divid="test">lalallalalalala</div>
(7)前端监控滚动条扩展阅读：
1、JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
（1）、是一种解释性脚本语言（代码不进行预编译）。
（2）、主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
（3）、可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
（4）、跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
2、JavaScript脚本语言具有以下特点:
(1)、脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
(2)、基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
(3)、简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
(4)、动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
(5)、跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。
‘捌’ angularjs 怎么监听滚动条
2. 如果你是用的jQuery2.0以上版本，还需要修改ng-infinite-scroll.js程序，将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(elem).xxx
3. 在HTML中引入script
<script type='text/javascript' src='path/to/jquery.min.js'></script>
<script type='text/javascript' src='path/to/angular.min.js'></script>
<script type='text/javascript' src='path/to/ng-infinite-scroll.min.js'></script>
4. HTML示例代码如下：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div ng-controller='PostListController'>
<div infinite-scroll='demo.nextPage()' infinite-scroll-disabled='demo.busy' infinite-scroll-distance=''>
<div ng-repeat='item in demo.items'>
<p>
<input type="hidden" value="{{item.PostId}}" />
<label>{{item.WriterName}}</label>
<label>{{item.WriterMail}}</label>
<label>{{item.WreckerName}}</label>
<label>{{item.StartDate}}</label>
<label>{{item.Location}}</label>
<label>{{item.Story}}</label>
</p>
</div>
<div ng-show='demo.busy'>Loading data...</div>
</div>
</div>
5. PostListController.js代码如下：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var ftitAppMole = angular.mole('ftitApp', ['infinite-scroll']);
ftitAppMole.controller('PostListController',
function ($scope, Demo) {
$scope.demo = new Demo();
});
// 创建后台数据交互工厂
ftitAppMole.factory('Demo', function ($http) {
var Demo = function () {
this.items = [];
this.busy = false;
this.after = '';
this.page = ;
};
Demo.prototype.nextPage = function () {
if (this.busy) return;
this.busy = true;
var url = "http://...:/api/post/nextpage?id=" + this.page + "&callback=JSON_CALLBACK";
$http.jsonp(url).success(function (data) {
var items = data;
for (var i = ; i < items.length; i++) {
this.items.push(items[i]);
}
this.after = "t_" + this.items[this.items.length - ].id;
this.busy = false;
this.page += ;
}.bind(this));
};
return Demo;
});
这样就实现了页面拖动到底后，从服务器自动加载数据的功能。
PS：AngularJS的加载执行过程
1. HTML页面的加载，这会触发加载页面包含的所有JS (包括 AngularJS)
2. AngularJS启动，搜寻所有的指令(directive)
3. 找到ng-app，搜寻其指定的模块(Mole)，并将其附加到ng-app所在的组件上。
4. AnguarJS遍历所有的子组件，查找指令和bind命令
5. 每次发现ng-controller或者ng-repeart的时候，它会创建一个作用域(scope)，这个作用域就是组件的上下文。作用域指明了每个DOM组件对函数、变量的访问权。
6. AngularJS然后会添加对变量的监听器，并监控每个变量的当前值。一旦值发生变化，AngularJS会更新其在页面上的显示。
7. AngularJS优化了检查变量的算法，它只会在某些特殊的事件触发时，才会去检查数据的更新，而不是简单地在后台不停地轮询。
‘玖’ 求前端高手！请问如何让div在滚动条>500px的时候自动向上移动10px,不用点击按钮。详细代码
引入jquery库，
$(function(){
$(document).scroll(//滚动条监控事件，每次滚动都执行
var top=$(this).scrollTop();//每次滚动获取一次滚动条的值
if(top >500){//判断滚动条值大小
$(this).scrollTop(top-10);//如果大于500，当前值减去10
}
);
})
大体就是这个意思，希望帮助到你