原生JS（四）：滚动条组件

2018-02-03

项目地址：https://github.com/Neilai/widget/blob/master/code/scrollbar.js

核心思想

由于要通过鼠标控制滑动条移动的距离，所以我们必须要实时获取鼠标的位置。这涉及到了pagex，pagey，offsetparent属性
滑块移动的距离和内容区移动距离有一个转换比ratio，通过这个对两个距离互相转换
整个内容区包裹在一个box中，超出部分overhidden，需要通过改变top/left控制移动

具体实现

有几个变量必须非常明确含义：

this._track_length

它指整个滑块可移动区域的大小加上滑块的大小
this._content_length

它指整个整个内容区的大小（包括box外面）
this._box_length

box容器的大小
this._thumb_length

滑块的大小
this._distance

可移动区域的大小
this._room

内容留在容器外的长度

它们的初始化代码为

this._content_length = this.options.direction=="y"?this.$content.offsetHeight:this.$content.offsetWidth;
this._box_length = this.options.direction=="y"?this.$this[0].offsetHeight:this.$this[0].offsetWidth;
this._thumb_length = this._box_length/this._content_length*this._track_length;
this._distance = Math.max(this._track_length-this._thumb_length,0);
this._room = Math.max(this._content_length-this._box_length,0);
this.ratio = this._distance+this._room?this._distance/this._room:0;

注意滑块长度是动态设定的

接下来就是封装移动函数，移动的时候要注意的是滑块和内容都要动，转换根据ratio

slide:function(move) {
			var self = this;
			if (move > this._room) { //对滚轴移动范围做限制
				move = this._room;
			} else if (move < 0) {
				move = 0;
			}
			if (this._room >= 0) {
				var off=this.options.direction == "y" ? 'top' : 'left';
				this.$thumb.style[off]=move*this.ratio+"px";
				this.$content.style[off]=-move+"px";
			}
		},

接下来就是关键的滑动监听，由于滑块要跟着鼠标动，所以要实时获取移动值，鼠标位置的获取比较简单，但是滑块的相对位置获取需要offparent遍历：

function offset(curEle) {
		var totalLeft = null,
			totalTop = null,
			par = curEle.offsetParent;
		//首先把自己本身的进行累加
		totalLeft += curEle.offsetLeft;
		totalTop += curEle.offsetTop;
	//	console.log(totalTop);
		//只要没有找到body，我们就把父级参照物的边框和偏移量累加
		while (par) {
			if (navigator.userAgent.indexOf("MSIE 8.0") === -1) {
				//不是标准的ie8浏览器，才进行边框累加
				//累加父级参照物边框
				totalLeft += par.clientLeft;
				totalTop += par.clientTop;
				//console.log(par,totalTop);
			}
			//累加父级参照物本身的偏移
			totalLeft += par.offsetLeft;
			totalTop += par.offsetTop;
			par = par.offsetParent;
		}
		return {
			left: totalLeft,
			top: totalTop
		};
	}

接下来绑定按下事件，目的是设定初值：

self.$track.addEventListener('mousedown', function(e) {
                self.isMouseDown=true;
                //self.$track.offsetParent=self.document
                self._track_offset = self.options.direction == "y" ? offset(self.$track).top : offset(self.$track).left;
                //鼠标位置与滑块最上部的插值
                self._cursor_position = self.options.direction=="y"?e.pageY-self._track_offset-self.$thumb.offsetTop:e.pageX-self._track_offset-self.$thumb.offsetLeft;
                setSelectable(self.body,false);
            }, false);

绑定移动时间时要注意，需要document绑定，因为滑块比较小….

this.document.addEventListener('mousemove', function(e) {
                if(self.isMouseDown){
                    var move = self.options.direction == "y" ? e.pageY - self._track_offset : e.pageX - self._track_offset;
                    if (self._cursor_position > 0 && self._cursor_position < self._thumb_length) {
                        move -= self._cursor_position;
                    }
                    //计算出移动距离
                    // console.log(self._room);
					self.slide(move/self.ratio);
                }
            }, false);

绑定滚动事件的时候要注意需要处理一下兼容性

1 2	var delta = -e.wheelDelta/120\|\|e.detail/3; var move = this.options.direction=="y"?-this.$content.offsetTop+deltathis.options.steps:-this.$content.offsetLeft+deltathis.options.steps;