优化:
优化了移动设备上,页面滑动距离和滚动条滚动距离比例不正确问题
背景:
在项目开发中,由于项目住效果图背景色属于深色系,但是火狐浏览器的默认滚动条样式是一个白色的宽条,两者结合样子太丑,所以尝试修改浏览器默认的滚动条样式。试了多次发现,谷歌和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浏览器的方向判断的数值的正负与其他浏览器是相反