css改火狐滚动条样式_自定义滚动条,可解决火狐滚动条默认样式修改不了问题...
优化:
优化了移动设备上,页面滑动距离和滚动条滚动距离比例不正确问题
背景:
在项目开发中,由于项目住效果图背景色属于深色系,但是火狐浏览器的默认滚动条样式是一个白色的宽条,两者结合样子太丑,所以尝试修改浏览器默认的滚动条样式。试了多次发现,谷歌和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浏览器:
css改火狐滚动条样式_自定义滚动条,可解决火狐滚动条默认样式修改不了问题...相关推荐
- 微信小程序获取滚动条高度_小程序超过高度加滚动条 小程序尺寸规范
DW里如何设置自适应屏幕高度,且内容超出时出现滚动条? 首先:打开DW并创建一个新的HTML页面.第二:为它的页面写一个div,类pingmu.第三,保存这个文件.第四:创建一个新的类样式,并为其Di ...
- css如何调整红心样式_条码软件如何调整条码数据的样式
在 条码软件中生成条码标签之后,有的客户对条码数据的显示效果有特殊要求,需要对条码数据的字体.样式.大小.颜色及对齐方式等进行修改以满足需求,咨询该如何设置,接下来在条码软件中给大家演示两种可以调整条 ...
- 阻止button默认点击边框_如何消除button/button标签的默认样式
在不添加任何样式的情况下,以下的html代码呈现如下: 1 2 3 4 5 6 7 8 9 上面是在谷歌浏览器中的默认样式.可以发现默认带有padding和border. 我们可以添加以下代码来消除默 ...
- 用css去除chrome、safari等webikt内核浏览器对控件默认样式
有这么一个webkit的私有属性: -webkit-appearance:none; /*去除input默认样式*/ 添加该样式,并且值为'none'时即可取消浏览器对于控件的默认样式. 另外这个属性 ...
- Android UI 统一修改Button控件的样式,以及其它系统控件的默认样式
先介绍下修改原理:首先打开位于android.widget包下面的Button.java文件,这里有一句关键的代码如下: public Button(Context context, Attribut ...
- odoo xml样式_自定义Odoo的界面样式
自定义Odoo的界面样式,最容易想到的办法就是找到相应的css文件进行修改,但这种方式太丑陋,不推荐.更优雅的的办法是自定义一个模块来个性化风格. 下面以安装在centos上的GreenOdoo为例简 ...
- ueditor 编辑器增加css样式_百度编辑器(uedtior)怎么更换样式文件
我们肯定经常要对编辑器做二次开发,对编辑器主题皮肤的修改就是最简单的修改.下面说下怎么修改. 编辑器初始化里面根本没有在页面里面引入css样式文件. 而只引入了js文件,那是怎么引入的呢? 查看 ue ...
- 安卓自定义下拉列表样式_自定义下拉列表样式
安卓自定义下拉列表样式 View demo 查看演示 Download Source
- plantuml样式_自定义PlantUML和C4 Model样式
什么是PlantUml PlantUml是一个支持快速绘制的开源项目.其定义了一套完整的语言用于实现UML关系图的描述.并基于强大的graphviz图形渲染库进行UML图的生成.绘制的UML图还可以导 ...
- plantuml样式_自定义PlantUML和C4Model的样式
什么是PlantUml PlantUml是一个支持快速绘制的开源项目.其定义了一套完整的语言用于实现UML关系图的描述.并基于强大的graphviz图形渲染库进行UML图的生成.绘制的UML图还可以导 ...
最新文章
- 英特尔cpu发布时间表_英特尔第11代桌面CPU将会支持PCIe4.0,Z490主板或可支持PCIe4.0...
- java中最常用jar包的用途说明,适合初学者
- java 反射代价_Java反射机制
- 【转】自旋锁及其衍生锁
- GMQ钱包致力成为您数字资产安全的保护伞
- proj4经纬度bl转换xy_分享proj4js中经纬度和兰伯特投影的转换代码
- Unity插件 - MeshEditor(九) 模型涡流扭曲特效(黑洞吸引特效)
- 常用十六进制颜色对照表代码
- Android实现身份证号码验证
- 路由器有信号但是连接不上网络连接服务器,无线路由器有信号却不能连接网络怎么办...
- 哈希表哪家强?编程语言找你来帮忙
- 红帽rhce考试自带补考吗_【重要通知】红帽 RHCE7.0 版本考试即将下线
- Oracle 11gR2 dataguard搭建说明 --- duplicate方式
- Alink漫谈(十) :线性回归实现 之 数据预处理
- opencv 风挡轮廓补全
- 服务器2003光盘修复,将Windows安装到光盘上 修复系统故障简单轻松
- 毫米波雷达传感技术方案,爱希ISEE人体感应器,智能感应人体存在控制应用
- 售前技术支持工程师工作流程
- PyNN:神经网络模拟器的通用接口
- ac100 linux,英特尔PROSet/无线驱动程序20.100.0 发布
热门文章
- 56. Attribute value 属性
- jQuery 提供了多种遍历 DOM 的方法。 遍历方法中最大的种类是树遍历(tree-traversal)。jQuery 提供了多种遍历 DOM 的方法。 遍历方法中最大的种类是树遍历(tree-t
- VS2017 无法使用XXX附加到应用程序
- Thread与Runnable的区别
- java连接远程服务器之manyged-ssh2 (windows和linux)
- Form窗体点击关闭按钮并未关闭进程的解决方法
- JavaScript数组的某些操作(一)
- MapStruct 入门使用
- 利用Python下载网络小说并保存到本地文件
- Cesium中的常用坐标及转换