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

优化：

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

背景：

　　在项目开发中，由于项目住效果图背景色属于深色系，但是火狐浏览器的默认滚动条样式是一个白色的宽条，两者结合样子太丑，所以尝试修改浏览器默认的滚动条样式。试了多次发现，谷歌和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浏览器的方向判断的数值的正负与其他浏览器是相反