優化：
優化了移動設備上，頁面滑動距離和滾動條滾動距離比例不正確問題
背景：
在項目開發中，由於項目住效果圖背景色屬於深色系，但是火狐瀏覽器的默認滾動條樣式是一個白色的寬條，兩者結合樣子太丑，所以嘗試修改瀏覽器默認的滾動條樣式。試了多次發現，谷歌和IE瀏覽器的默認滾動條樣式可以修改，但是火狐瀏覽器卻不起作用，無奈，只能嘗試自己編寫一個滾動條，禁用瀏覽器默認的滾動條
說明：
介紹一個自定義的滾動條服務，修改瀏覽器默認的滾動條樣式，可兼容火狐瀏覽器。可以兼容PC和移動設備。
代碼：
優化前：
/**
* 自定義滾動條服務
* @param scrollWrap 滾動視圖外部容器
* @param scrollView 滾動視圖
* @param scrollBar 滾動條容器
* @param scrollBtn 滾動條按鈕
* @param scrollList 滾動視圖外部容器
*/
export function Scroll(scrollWrap, scrollView, scrollBar, scrollBtn, scrollList) {
this.scrollWrap = scrollWrap;
this.scrollView = scrollView;
this.scrollBar = scrollBar;
this.scrollBtn = scrollBtn;
this.scrollList = scrollList;
this.setScroll = () =>{
let that = this;
// 判斷當前設備是否是移動設備
let isMobile:boolean = !!navigator.userAgent.match(/(iPhone|iPad|iPod|Android|ios|SymbianOS)/i);
let touchStartPoint = null;
let scrollWrapHeight = that.scrollWrap["nativeElement"].offsetHeight;
let scrollViewH = that.scrollView["nativeElement"].offsetHeight;
that.scrollBar.nativeElement.style.display = 'block';
let scrollBarH = that.scrollBar["nativeElement"].offsetHeight;
let wrapTopH = that.scrollWrap["nativeElement"].offsetTop;
// let scrollWrapHeight = that.scrollWrap.offsetHeight; // 獲取父級容器高度值；
// // 獲取的不正確，導致滑塊高度變大了，就滾動不到頁面底部了
// let scrollViewH = that.scrollView.scrollHeight; // 獲取滾動頁面的高度
// let scrollBarH = that.scrollBar.offsetHeight; // 獲取滾動槽的高度
// let wrapTopH = that.scrollWrap.offsetTop; // 獲取body容器到父級容器的高度值；
let scrollBtnH = scrollWrapHeight * scrollBarH / scrollViewH;
//當滾動視圖的高度小於容器視圖的高度時，不顯示滾動條，禁用滾動事件
if(scrollViewH <= scrollWrapHeight){
scrollViewH = scrollWrapHeight;
}else{
//Do-nothing
}
// 給滑動按鈕設置最小高度
if (scrollBtnH <= 10) {
that.scrollBar.nativeElement.style.display = 'block';
scrollBtnH = 1;
} else if (scrollBtnH >= scrollBarH) {
scrollBtnH = 0;
that.scrollBar.nativeElement.style.display = 'none';
that.scrollView.nativeElement.style.paddingRight = 0;
}
// 動態設置滑動按鈕的高度
that.scrollBtn.nativeElement.style.height = scrollBtnH + 'px';
// 鼠標點擊事件
let defaults = {
addEvent: function (event) {
event = event || window.event;
let touchPageY = event.pageY - wrapTopH;
if (touchPageY < scrollBtnH / 2) {
touchPageY = scrollBtnH / 2;
} else if (touchPageY > (scrollBarH - scrollBtnH / 2)) {
touchPageY = (scrollBarH - scrollBtnH / 2);
}else{
//Do-nothing
}
if (scrollBtnH == 0) {
touchPageY = 0;
}
// 禁止冒泡
that.stopBubble(event);
//保持滑塊中心滾動 touchPageY - scrollBtnH/2
that.scrollBtn.nativeElement.style.top = touchPageY - scrollBtnH / 2 + 'px';
that.scrollView.nativeElement.style.top = -(touchPageY - scrollBtnH / 2) * (scrollViewH - scrollBarH) / (scrollBarH - scrollBtnH) + 'px';
},
scrollFunc: function (event) {
let scrollTop = that.scrollBtn.nativeElement.offsetTop;
let btnTop = 0; // 滑塊距離滾動條容器的top值，向上滾動最小值是0，向下滾動最大值是滾動條容器高度-滑塊高度
// 設置每次滾動距離，滾動距離按照滾動條按鈕高度的1/6計算，滾動條按鈕高度大，每次滾動距離大，滾動條按鈕高度小，每次滾動距離小
if (event.wheelDelta) {
let scrollHeight = scrollBtnH/6;
//IE/Opera/Chrome
/*
* IE6首先實現了mousewheel事件。
* 此后，Opera、Chrome和Safari也都實現了這個事件。
* 當用戶通過鼠標滾輪與頁面交互、在垂直方向上滾動頁面時（無論向上還是向下），就會觸發mousewheel事件。
* 這個事件可以在任何元素上面觸發，最終會冒泡到document（IE8）或window（IE9、Opera、Chrome及Safari）對象。
* 與mousewheel事件對應的event對象包含鼠標事件的所有標准信息外，還包含一個特殊的wheelDelta屬性。
* 當用戶向上滾動鼠標滾輪時，wheelDelta是120的倍數；當用戶向下滾動鼠標滾輪時，wheelDelta是-120的倍數。
* */
if (event.wheelDelta > 0) {
btnTop = scrollTop - scrollHeight; // 設定每次滾輪移動 50px
if (btnTop < 0) {
btnTop = 0;
}
} else {
btnTop = scrollTop + scrollHeight;
if (btnTop > (scrollBarH - scrollBtnH)) {
btnTop = (scrollBarH - scrollBtnH);
}
}
} else if (event.detail) {
let scrollHeight = scrollBtnH/10;
//Firefox
/*
* Firefox支持一個名為DOMMouseScroll的類似事件，也是在鼠標滾輪滾動時觸發。
* 與mousewheel事件一樣，DOMMouseScroll也被視為鼠標事件，因而包含於鼠標事件有關的所有屬性。
* 而有關鼠標滾輪的信息則保存在detail屬性中，當向上滾動鼠標滾輪時，這個屬性的值是-3的倍數，當向下滾動鼠標滾輪時，這個屬性的值是3的倍數。
* 火狐內核FireFox瀏覽器的方向判斷的數值的正負與其他瀏覽器是相反的。
* FireFox瀏覽器向下滾動是正值，而其他瀏覽器是負值。
* */
if (event.detail > 0) {
btnTop = scrollTop + scrollHeight;
if (btnTop > (scrollBarH - scrollBtnH)) {
btnTop = (scrollBarH - scrollBtnH);
}else{
//Do-nothing
}
} else {
btnTop = scrollTop - scrollHeight;
if (btnTop < 0) {
btnTop = 0;
}else{
//Do-nothing
}
}
}
that.scrollBtn.nativeElement.style.top = btnTop + 'px';
that.scrollView.nativeElement.style.top = -btnTop * (scrollViewH - scrollBarH) / (scrollBarH - scrollBtnH) + 'px';
// 禁止冒泡
that.stopBubble(event);
},
moveFunc:function(event){
let scrollTop = that.scrollBtn.nativeElement.offsetTop;
let btnTop = 0; // 滑塊距離滾動條容器的top值，向上滾動最小值是0，向下滾動最大值是滾動條容器高度-滑塊高度
let scrollViewTop = that.scrollView.nativeElement.offsetTop;
let moveDirection = "up"; // 代表滑動方向，up—手指由下向上滑動，down—手指由上向下滑動
let viewTop = 0;
let touchMovePoint = event.touches[0].clientY;
let moveHeight = touchMovePoint - touchStartPoint;
// 判斷移動方向
// 計算滑塊移動距離
btnTop = scrollTop - moveHeight ;
// 計算頁面移動距離
viewTop = scrollViewTop + moveHeight * (scrollViewH - scrollBarH) / (scrollBarH - scrollBtnH);
let bubbleToFather:boolean = false;
if(0 !== moveHeight){
// 是否冒泡到父級
if(moveHeight<0){
moveDirection = "up";
// 滑塊距離滑槽最大距離為scrollBarH - scrollBtnH px
if(btnTop > (scrollBarH - scrollBtnH)){
btnTop = (scrollBarH - scrollBtnH);
bubbleToFather = true;
}else{
// Do-nothing
}
if(viewTop < (scrollWrapHeight - scrollViewH)){
viewTop = (scrollWrapHeight - scrollViewH);
}else{
// Do-nothing
}
}else{
moveDirection = "down";
// 滑塊距離滑槽最小距離為0px
if (btnTop < 0) {
btnTop = 0;
bubbleToFather = true;
}else{
//Do-nothing
}
// 頁面滑動最大距離為0px;
if(viewTop >0){
viewTop =0;
}else{
// Do-nothing
}
}
// 滑動滾動條
that.scrollBtn.nativeElement.style.top = btnTop + "px";
// 滑動頁面
that.scrollView.nativeElement.style.top = viewTop + 'px';
// 重置開始點擊位置
touchStartPoint = touchMovePoint;
if(bubbleToFather === false){
// 禁止冒泡
that.stopBubble(event);
}else{
// Do-nothing
}
}else{
// 移動距離為0 ,不用處理
}
}
};
if(true === isMobile){
// 移動端監聽觸屏事件
that.scrollView.nativeElement.ontouchstart = function(event){
touchStartPoint = event.touches[0].clientY;
}
// 移動端監聽觸屏移動事件
that.scrollView.nativeElement.ontouchmove = function(event){
defaults.moveFunc(event);
}
// 移動端監聽觸屏結束事件
that.scrollView.nativeElement.ontouchend = function(event){
touchStartPoint = null;
}
}else{
// Do-nothing
}
// 鼠標抬起，移除鼠標移動事件監聽
document.onmouseup = function () {
document.onmousemove = null;
};
// 監聽鼠標點擊,鼠標按下,監聽拖拽滾動條移動事件
that.scrollBtn.nativeElement.onmousedown = function(){
document.onmousemove = function(event){
defaults.addEvent(event);
}
}
//點擊滾動條容器觸發事件
that.scrollBar.nativeElement.onclick = function (event) {
defaults.addEvent(event);
};
// 滾輪事件
if (this.scrollList) {
/*
* Firefox支持一個名為DOMMouseScroll的類似事件，也是在鼠標滾輪滾動時觸發
* 針對Firefox瀏覽器，監聽DOMMouseScroll事件，調用defaults.scrollFunc函數，不使用捕獲
* */
this.scrollList.nativeElement.addEventListener('DOMMouseScroll', defaults.scrollFunc, false);
// document.addEventListener('DOMMouseScroll', defaults.scrollFunc, false);
}
/*
* 針對IE/Opera/Chrome/Safari等瀏覽器，將defaults.scrollFunc方法覆蓋滾動事件默認行為
* */
this.scrollList.nativeElement.onmousewheel = defaults.scrollFunc;//IE/Opera/Chrome/Safari
}
//重新繪制滾動條
this.resetScroll = () =>{
setTimeout(() =>{
let _this = this;
//改變屏幕尺寸以后，將滾動條位置歸零
this.scrollBtn.nativeElement.style.top = 0 +'px';
this.scrollView.nativeElement.style.top = 0 +'px';
let scrollWrapHeight = _this.scrollWrap["nativeElement"].offsetHeight;
let scrollViewH = _this.scrollView["nativeElement"].offsetHeight;
_this.scrollBar.nativeElement.style.display = 'block';
let scrollBarH = _this.scrollBar["nativeElement"].offsetHeight;
let wrapTopH = _this.scrollWrap["nativeElement"].offsetTop;
this.setScroll();
},1000)
}
// 阻止冒泡
this.stopBubble = (e) => {
//如果提供了事件對象，則這是一個非IE瀏覽器
if ( e && e.stopPropagation ) {
e.preventDefault();
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
}else {
//否則，我們需要使用IE的方式來取消事件冒泡
window.event.cancelBubble = true;
}
}
}
優化后：
/**
* 自定義滾動條服務
* @param scrollWrap 滾動視圖外部容器
* @param scrollView 滾動視圖
* @param scrollBar 滾動條容器
* @param scrollBtn 滾動條按鈕
* @param scrollList 滾動視圖外部容器
*/
export function Scroll(scrollWrap, scrollView, scrollBar, scrollBtn, scrollList) {
this.scrollWrap = scrollWrap;
this.scrollView = scrollView;
this.scrollBar = scrollBar;
this.scrollBtn = scrollBtn;
this.scrollList = scrollList;
this.setScroll = () => {
let that = this;
// 判斷當前設備是否是移動設備
let isMobile: boolean = !!navigator.userAgent.match(/(iPhone|iPad|iPod|Android|ios|SymbianOS)/i);
let touchStartPoint = null;
let scrollWrapHeight = that.scrollWrap["nativeElement"].offsetHeight;
let scrollViewH = that.scrollView["nativeElement"].offsetHeight;
that.scrollBar.nativeElement.style.display = 'block';
let scrollBarH = that.scrollBar["nativeElement"].offsetHeight;
let wrapTopH = that.scrollWrap["nativeElement"].offsetTop;
// let scrollWrapHeight = that.scrollWrap.offsetHeight; // 獲取父級容器高度值；
// // 獲取的不正確，導致滑塊高度變大了，就滾動不到頁面底部了
// let scrollViewH = that.scrollView.scrollHeight; // 獲取滾動頁面的高度
// let scrollBarH = that.scrollBar.offsetHeight; // 獲取滾動槽的高度
// let wrapTopH = that.scrollWrap.offsetTop; // 獲取body容器到父級容器的高度值；
let scrollBtnH = scrollWrapHeight * scrollBarH / scrollViewH;
//當滾動視圖的高度小於容器視圖的高度時，不顯示滾動條，禁用滾動事件
if (scrollViewH <= scrollWrapHeight) {
scrollViewH = scrollWrapHeight;
} else {
//Do-nothing
}
// 給滑動按鈕設置最小高度
if (scrollBtnH <= 10) {
that.scrollBar.nativeElement.style.display = 'block';
scrollBtnH = 1;
} else if (scrollBtnH >= scrollBarH) {
scrollBtnH = 0;
that.scrollBar.nativeElement.style.display = 'none';
that.scrollView.nativeElement.style.paddingRight = 0;
}
// 動態設置滑動按鈕的高度
that.scrollBtn.nativeElement.style.height = scrollBtnH + 'px';
// 鼠標點擊事件
let defaults = {
addEvent: function (event) {
event = event || window.event;
let touchPageY = event.pageY - wrapTopH;
if (touchPageY < scrollBtnH / 2) {
touchPageY = scrollBtnH / 2;
} else if (touchPageY > (scrollBarH - scrollBtnH / 2)) {
touchPageY = (scrollBarH - scrollBtnH / 2);
} else {
//Do-nothing
}
if (scrollBtnH == 0) {
touchPageY = 0;
}
// 禁止冒泡
that.stopBubble(event);
//保持滑塊中心滾動 touchPageY - scrollBtnH/2
that.scrollBtn.nativeElement.style.top = touchPageY - scrollBtnH / 2 + 'px';
that.scrollView.nativeElement.style.top = -(touchPageY - scrollBtnH / 2) * (scrollViewH - scrollBarH) / (scrollBarH - scrollBtnH) + 'px';
},
scrollFunc: function (event) {
let scrollTop = that.scrollBtn.nativeElement.offsetTop;
let btnTop = 0; // 滑塊距離滾動條容器的top值，向上滾動最小值是0，向下滾動最大值是滾動條容器高度-滑塊高度
// 設置每次滾動距離，滾動距離按照滾動條按鈕高度的1/6計算，滾動條按鈕高度大，每次滾動距離大，滾動條按鈕高度小，每次滾動距離小
if (event.wheelDelta) {
let scrollHeight = scrollBtnH / 6;
//IE/Opera/Chrome
/*
* IE6首先實現了mousewheel事件。
* 此后，Opera、Chrome和Safari也都實現了這個事件。
* 當用戶通過鼠標滾輪與頁面交互、在垂直方向上滾動頁面時（無論向上還是向下），就會觸發mousewheel事件。
* 這個事件可以在任何元素上面觸發，最終會冒泡到document（IE8）或window（IE9、Opera、Chrome及Safari）對象。
* 與mousewheel事件對應的event對象包含鼠標事件的所有標准信息外，還包含一個特殊的wheelDelta屬性。
* 當用戶向上滾動鼠標滾輪時，wheelDelta是120的倍數；當用戶向下滾動鼠標滾輪時，wheelDelta是-120的倍數。
* */
if (event.wheelDelta > 0) {
btnTop = scrollTop - scrollHeight; // 設定每次滾輪移動 50px
if (btnTop < 0) {
btnTop = 0;
}
} else {
btnTop = scrollTop + scrollHeight;
if (btnTop > (scrollBarH - scrollBtnH)) {
btnTop = (scrollBarH - scrollBtnH);
}
}
} else if (event.detail) {
let scrollHeight = scrollBtnH / 10;
//Firefox
/*
* Firefox支持一個名為DOMMouseScroll的類似事件，也是在鼠標滾輪滾動時觸發。
* 與mousewheel事件一樣，DOMMouseScroll也被視為鼠標事件，因而包含於鼠標事件有關的所有屬性。
* 而有關鼠標滾輪的信息則保存在detail屬性中，當向上滾動鼠標滾輪時，這個屬性的值是-3的倍數，當向下滾動鼠標滾輪時，這個屬性的值是3的倍數。
* 火狐內核FireFox瀏覽器的方向判斷的數值的正負與其他瀏覽器是相反的。
* FireFox瀏覽器向下滾動是正值，而其他瀏覽器是負值。
* */
if (event.detail > 0) {
btnTop = scrollTop + scrollHeight;
if (btnTop > (scrollBarH - scrollBtnH)) {
btnTop = (scrollBarH - scrollBtnH);
} else {
//Do-nothing
}
} else {
btnTop = scrollTop - scrollHeight;
if (btnTop < 0) {
btnTop = 0;
} else {
//Do-nothing
}
}
}
that.scrollBtn.nativeElement.style.top = btnTop + 'px';
that.scrollView.nativeElement.style.top = -btnTop * (scrollViewH - scrollBarH) / (scrollBarH - scrollBtnH) + 'px';
// 禁止冒泡
that.stopBubble(event);
},
moveFunc: function (event) {
let moveDirection = "up"; // 代表滑動方向，up—手指由下向上滑動，down—手指由上向下滑動
// 是否冒泡到父級
let bubbleToFather: boolean = false;
// 計算最大移動距離
let scrollViewMaxMove = scrollViewH - scrollWrapHeight; // 視圖移動的最大距離
let scrollBarMaxMove = scrollBarH - scrollBtnH; // 按鈕移動的最大距離
// 移動前的距離
let scrollViewTop = that.scrollView.nativeElement.offsetTop; // 視圖移動前距離上邊界的距離
let scrollBtnTop = that.scrollBtn.nativeElement.offsetTop; // 按鈕移動前距離上邊界的距離
// 移動的距離
let scrollViewMove = null; // 視圖內容移動的距離
let scrollBtnMove = null; // 滾動按鈕移動的距離
let touchMovePoint = event.touches[0].clientY;
let moveHeight = touchMovePoint - touchStartPoint; // 計算頁面內容移動的距離
// 移動后的距離
let scrollViewMoveEnd = null; // 視圖移動后的距離
let scrollBtnMoveEnd = null; // 按鈕移動后的距離
if (0 !== moveHeight) {
moveDirection = moveHeight < 0 ? "up" : "down"; // 計算滑動方向，手指從下向上滑動，滑塊向下走動距離為正，視圖內容向上走動距離為負；手指從上向下滑動，滑塊向上走動距離為負，視圖內容向下走動距離為正
scrollViewMove = moveHeight ; // 計算視圖移動的距離，滑塊移動方向和手指移動方向相同，所以是 moveHeight
scrollBtnMove = - moveHeight * scrollBarMaxMove / scrollViewMaxMove; // 計算滑塊移動距離，滑塊移動方向和手指移動方向相反，所以是 -moveHeight
scrollViewMoveEnd = scrollViewTop + scrollViewMove; // 計算視圖移動后的最終位置
scrollViewMoveEnd = scrollViewMoveEnd < -scrollViewMaxMove ? -scrollViewMaxMove : scrollViewMoveEnd; // 視圖向上移動，最終位置最大值就是頁面底部
scrollViewMoveEnd = scrollViewMoveEnd > 0 ? 0 : scrollViewMoveEnd; // 視圖向下移動，最終位置最小值就是頁面頂部
that.scrollView.nativeElement.style.top = scrollViewMoveEnd + 'px'; // 設置頁面移動
scrollBtnMoveEnd = scrollBtnTop + scrollBtnMove; // 計算滑塊移動后的最終位置
scrollBtnMoveEnd = scrollBtnMoveEnd > scrollBarMaxMove ? scrollBarMaxMove : scrollBtnMoveEnd; // 滑塊向下移動，最終位置最大值就是滾動條容器的底部
scrollBtnMoveEnd = scrollBtnMoveEnd < 0 ? 0 : scrollBtnMoveEnd; // 滑塊向上移動，最終位置最小值就是滾動條容器的頂部
that.scrollBtn.nativeElement.style.top = scrollBtnMoveEnd + 'px'; // 移動滾動條滑塊按鈕
// 重置開始點擊位置
touchStartPoint = touchMovePoint;
if (bubbleToFather === false) {
// 禁止冒泡
that.stopBubble(event);
} else {
// Do-nothing
}
} else {
// 移動距離為0 ,不用處理
}
}
// 上一個版本，修改前備份
// moveFunc:function(event){
// let scrollTop = that.scrollBtn.nativeElement.offsetTop;
// let btnTop = 0; // 滑塊距離滾動條容器的top值，向上滾動最小值是0，向下滾動最大值是滾動條容器高度-滑塊高度
// let scrollViewTop = that.scrollView.nativeElement.offsetTop;
// let moveDirection = "up"; // 代表滑動方向，up—手指由下向上滑動，down—手指由上向下滑動
// let viewTop = 0;
// let touchMovePoint = event.touches[0].clientY;
// let moveHeight = touchMovePoint - touchStartPoint;
// // 判斷移動方向
// // 計算滑塊移動距離
// btnTop = scrollTop - moveHeight ;
// // 計算頁面移動距離
// viewTop = scrollViewTop + moveHeight * (scrollViewH - scrollBarH) / (scrollBarH - scrollBtnH);
// let bubbleToFather:boolean = false;
// if(0 !== moveHeight){
// // 是否冒泡到父級
// if(moveHeight<0){
// moveDirection = "up";
// // 滑塊距離滑槽最大距離為scrollBarH - scrollBtnH px
// if(btnTop > (scrollBarH - scrollBtnH)){
// btnTop = (scrollBarH - scrollBtnH);
// bubbleToFather = true;
// }else{
// // Do-nothing
// }
// if(viewTop < (scrollWrapHeight - scrollViewH)){
// viewTop = (scrollWrapHeight - scrollViewH);
// }else{
// // Do-nothing
// }
// }else{
// moveDirection = "down";
// // 滑塊距離滑槽最小距離為0px
// if (btnTop < 0) {
// btnTop = 0;
// bubbleToFather = true;
// }else{
// //Do-nothing
// }
// // 頁面滑動最大距離為0px;
// if(viewTop >0){
// viewTop =0;
// }else{
// // Do-nothing
// }
// }
// // 滑動滾動條
// that.scrollBtn.nativeElement.style.top = btnTop + "px";
// // 滑動頁面
// that.scrollView.nativeElement.style.top = viewTop + 'px';
// // 重置開始點擊位置
// touchStartPoint = touchMovePoint;
// if(bubbleToFather === false){
// // 禁止冒泡
// that.stopBubble(event);
// }else{
// // Do-nothing
// }
// }else{
// // 移動距離為0 ,不用處理
// }
// }
};
if (true === isMobile) {
// 移動端監聽觸屏事件
that.scrollView.nativeElement.ontouchstart = function (event) {
touchStartPoint = event.touches[0].clientY;
}
// 移動端監聽觸屏移動事件
that.scrollView.nativeElement.ontouchmove = function (event) {
defaults.moveFunc(event);
}
// 移動端監聽觸屏結束事件
that.scrollView.nativeElement.ontouchend = function (event) {
touchStartPoint = null;
}
} else {
// Do-nothing
}
// 鼠標抬起，移除鼠標移動事件監聽
document.onmouseup = function () {
document.onmousemove = null;
};
// 監聽鼠標點擊,鼠標按下,監聽拖拽滾動條移動事件
that.scrollBtn.nativeElement.onmousedown = function () {
document.onmousemove = function (event) {
defaults.addEvent(event);
}
}
//點擊滾動條容器觸發事件
that.scrollBar.nativeElement.onclick = function (event) {
defaults.addEvent(event);
};
// 滾輪事件
if (this.scrollList) {
/*
* Firefox支持一個名為DOMMouseScroll的類似事件，也是在鼠標滾輪滾動時觸發
* 針對Firefox瀏覽器，監聽DOMMouseScroll事件，調用defaults.scrollFunc函數，不使用捕獲
* */
this.scrollList.nativeElement.addEventListener('DOMMouseScroll', defaults.scrollFunc, false);
// document.addEventListener('DOMMouseScroll', defaults.scrollFunc, false);
}
/*
* 針對IE/Opera/Chrome/Safari等瀏覽器，將defaults.scrollFunc方法覆蓋滾動事件默認行為
* */
this.scrollList.nativeElement.onmousewheel = defaults.scrollFunc;//IE/Opera/Chrome/Safari
}
//重新繪制滾動條
this.resetScroll = () => {
setTimeout(() => {
let _this = this;
//改變屏幕尺寸以后，將滾動條位置歸零
this.scrollBtn.nativeElement.style.top = 0 + 'px';
this.scrollView.nativeElement.style.top = 0 + 'px';
let scrollWrapHeight = _this.scrollWrap["nativeElement"].offsetHeight;
let scrollViewH = _this.scrollView["nativeElement"].offsetHeight;
_this.scrollBar.nativeElement.style.display = 'block';
let scrollBarH = _this.scrollBar["nativeElement"].offsetHeight;
let wrapTopH = _this.scrollWrap["nativeElement"].offsetTop;
this.setScroll();
}, 1000)
}
this.stopBubble = (e) => {
//如果提供了事件對象，則這是一個非IE瀏覽器
if (e && e.stopPropagation) {
e.preventDefault();
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
} else {
//否則，我們需要使用IE的方式來取消事件冒泡
window.event.cancelBubble = true;
}
}
}
使用：
Angular html
Angular component:
css
效果圖：
谷歌瀏覽器截圖：
火狐瀏覽器截圖：
IE瀏覽器：
360瀏覽器：
