自定义滚动条,可解决火狐滚动条默认样式修改不了问题
优化:
优化了移动设备上,页面滑动距离和滚动条滚动距离比例不正确问题
背景:
在项目开发中,由于项目住效果图背景色属于深色系,但是火狐浏览器的默认滚动条样式是一个白色的宽条,两者结合样子太丑,所以尝试修改浏览器默认的滚动条样式。试了多次发现,谷歌和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浏览器:
提示:
现在可以通过修改 ::-webkit-scrollbar 完美实现
1 ::-webkit-scrollbar {width:10px !important;height:100%;} 2 ::-webkit-scrollbar-thumb {border-radius:2px;background-color:$tipBgColor;} 3 ::-webkit-scrollbar-track {background-color: #716e6e;}