『壹』 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
}
);
})
大體就是這個意思，希望幫助到你