自定义滚动条 可解决火狐滚动条默认样式修改不了问题

优化：

优化了移动设备上，页面滑动距离和滚动条滚动距离比例不正确问题

背景：

在项目开发中，由于项目住效果图背景色属于深色系，但是火狐浏览器的默认滚动条样式是一个白色的宽条，两者结合样子太丑，所以尝试修改浏览器默认的滚动条样式。试了多次发现，谷歌和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/2that.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; // 设定每次滚轮移动 50pxif (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 pxif(btnTop > (scrollBarH - scrollBtnH)){btnTop = (scrollBarH - scrollBtnH);bubbleToFather = true;}else{// Do-nothing}if(viewTop < (scrollWrapHeight - scrollViewH)){viewTop = (scrollWrapHeight - scrollViewH);}else{// Do-nothing}}else{moveDirection = "down";// 滑块距离滑槽最小距离为0pxif (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/2that.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; // 设定每次滚轮移动 50pxif (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 ; // 计算视图移动的距离，滑块移动方向和手指移动方向相同，所以是 moveHeightscrollBtnMove = - moveHeight * scrollBarMaxMove / scrollViewMaxMove; // 计算滑块移动距离，滑块移动方向和手指移动方向相反，所以是 -moveHeightscrollViewMoveEnd = 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浏览器：