RagtagGeoduck/15.05-自定义滚动条+滚轮事件.html

## 15.05-自定义滚动条+滚轮事件.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义滚动条</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/1503style.css">
</head>
<body>
    <div id="wrap">
        <div class="content"></div>
        <div class="scrollBar">

            <div class="scrollIn"></div>
        </div>
    </div>
    <script type="text/javascript">
        // 模拟内容区域
        var content = document.querySelector('#wrap .content');
        var scrollIn = document.querySelector('#wrap .scrollBar .scrollIn');
        for(var i=0;i<200;i++){
            content.innerHTML += i + '<br/>';
        }

        // 滚动条的高度/屏幕的高度 = 屏幕的高度/内容的高度 = 滚动条的移动距离/内容滚动的距离

        var scale = document.documentElement.clientHeight / content.offsetHeight;

        // 滚动条的高度
        // scrollIn.style.height = scale * document.documentElement.clientHeight;
        scrollIn.style.height = scale * document.documentElement.clientHeight + 'px';

        scrollIn.onmousedown = function (){
            // 元素的初始位置
            var eleY = scrollIn.offsetTop;
            scrollIn.setCapture && scrollIn.setCapture()

            // 鼠标的初始位置
            var mouseY = event.clientY;

            document.onmousemove = function (){
                var endY = event.clientY;
                var disY = endY - mouseY;

                // 最终元素位置
                var lastY = disY + eleY;
                if(lastY<0){
                    lastY=0
                }else if(lastY>document.documentElement.clientHeight-scrollIn.offsetHeight){
                    lastY=document.documentElement.clientHeight-scrollIn.offsetHeight;
                }
                scrollIn.style.top = lastY + 'px';

                // 设置内容的高度
                var contentTop = -lastY / scale;
                console.log(contentTop);
                console.log(content.style.top);
                content.style.top = contentTop + 'px';
            }
            document.onmouseup = function (){
                document.onmousemove=document.onmouseup=null;
                scrollIn.releaseCapture && scrollIn.releaseCapture();

            }
            // dom0事件取消默认行为
            return false;

        }
        var flag = true;
        document.addEventListener('mousewheel', scrollMove);
        document.addEventListener('DOMMouseScroll', scrollMove);
        function scrollMove(event){
            if(event.wheelDelta){
                if(event.wheelDelta > 0){
                // 往上滚
                    flag = true;
                    step = -10;

                }else {
                // 往下滚
                    flag = false;
                    step = 10;
                }
                // flag = event.wheelDelta > 0;
            }
            if(event.detail){
                if(event.detail < 0){
                    flag = true;
                    step = -10;
                }else {
                    flag = false;
                    step = 10;
                }
                // flag = event.detail < 0;
            }

            var scrollLastTop = scrollIn.offsetTop + step;
            if(scrollLastTop < 0){
                scrollLastTop = 0;
            }else if(scrollLastTop > document.documentElement.clientHeight - scrollIn.offsetHeight){
                scrollLastTop = document.documentElement.clientHeight - scrollIn.offsetHeight;
            }
            scrollIn.style.top = scrollLastTop + 'px';

            var contentTop = -scrollLastTop / scale;
            content.style.top = contentTop + 'px';

            // if (flag){
            //     // 判断上边界
            //     // 页面向上走 滑块向下走
            //     scrollIn.style.top = scrollIn.offsetTop -10 +'px';
            //
            // }else{
            //     // 判断下边界
            //     // 页面向下走 滑块向上走
            //     scrollIn.style.top = scrollIn.offsetTop + 10 + 'px';
            // }
        }
    </script>
</body>
</html>

## 1503style.css
* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  display: block;
}
input {
  outline: none;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
#wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#wrap .content {
  position: absolute;
  top: 0;
  left: 0;
}
#wrap .scrollBar {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 100%;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
}
#wrap .scrollBar .scrollIn {
  position: absolute;
  width: 35px;
  height: 30px;
  background-color: deepskyblue;
  left: 50%;
  transform: translateX(-50%);
}
/*# sourceMappingURL=1503style.css.map */

## 1503style.less
*{
  margin: 0;
  padding: 0;
}
ul,li{
  list-style: none;
}
a{
  text-decoration: none;

}
img{
  display: block;
}
input{
  outline:none;
}
html,body{
  height: 100%;
  overflow: hidden;
}
#wrap{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .content{
    position: absolute;
    top: 0;
    left: 0;
  }

  .scrollBar{
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 100%;
    border-left: 1px solid grey;
    border-right: 1px solid grey;

    .scrollIn{
      position: absolute;
      width: 35px;
      height: 30px;
      background-color: deepskyblue;
      //margin: 0 auto;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>自定义滚动条</title>
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/1503style.css">
	</head>
	<body>
	<div id="wrap">
	<div class="content"></div>
	<div class="scrollBar">

	<div class="scrollIn"></div>
	</div>
	</div>
	<script type="text/javascript">
	// 模拟内容区域
	var content = document.querySelector('#wrap .content');
	var scrollIn = document.querySelector('#wrap .scrollBar .scrollIn');
	for(var i=0;i<200;i++){
	content.innerHTML += i + '<br/>';
	}

	// 滚动条的高度/屏幕的高度 = 屏幕的高度/内容的高度 = 滚动条的移动距离/内容滚动的距离

	var scale = document.documentElement.clientHeight / content.offsetHeight;

	// 滚动条的高度
	// scrollIn.style.height = scale * document.documentElement.clientHeight;
	scrollIn.style.height = scale * document.documentElement.clientHeight + 'px';

	scrollIn.onmousedown = function (){
	// 元素的初始位置
	var eleY = scrollIn.offsetTop;
	scrollIn.setCapture && scrollIn.setCapture()

	// 鼠标的初始位置
	var mouseY = event.clientY;

	document.onmousemove = function (){
	var endY = event.clientY;
	var disY = endY - mouseY;

	// 最终元素位置
	var lastY = disY + eleY;
	if(lastY<0){
	lastY=0
	}else if(lastY>document.documentElement.clientHeight-scrollIn.offsetHeight){
	lastY=document.documentElement.clientHeight-scrollIn.offsetHeight;
	}
	scrollIn.style.top = lastY + 'px';

	// 设置内容的高度
	var contentTop = -lastY / scale;
	console.log(contentTop);
	console.log(content.style.top);
	content.style.top = contentTop + 'px';
	}
	document.onmouseup = function (){
	document.onmousemove=document.onmouseup=null;
	scrollIn.releaseCapture && scrollIn.releaseCapture();

	}
	// dom0事件取消默认行为
	return false;

	}
	var flag = true;
	document.addEventListener('mousewheel', scrollMove);
	document.addEventListener('DOMMouseScroll', scrollMove);
	function scrollMove(event){
	if(event.wheelDelta){
	if(event.wheelDelta > 0){
	// 往上滚
	flag = true;
	step = -10;

	}else {
	// 往下滚
	flag = false;
	step = 10;
	}
	// flag = event.wheelDelta > 0;
	}
	if(event.detail){
	if(event.detail < 0){
	flag = true;
	step = -10;
	}else {
	flag = false;
	step = 10;
	}
	// flag = event.detail < 0;
	}

	var scrollLastTop = scrollIn.offsetTop + step;
	if(scrollLastTop < 0){
	scrollLastTop = 0;
	}else if(scrollLastTop > document.documentElement.clientHeight - scrollIn.offsetHeight){
	scrollLastTop = document.documentElement.clientHeight - scrollIn.offsetHeight;
	}
	scrollIn.style.top = scrollLastTop + 'px';

	var contentTop = -scrollLastTop / scale;
	content.style.top = contentTop + 'px';

	// if (flag){
	// // 判断上边界
	// // 页面向上走滑块向下走
	// scrollIn.style.top = scrollIn.offsetTop -10 +'px';
	//
	// }else{
	// // 判断下边界
	// // 页面向下走滑块向上走
	// scrollIn.style.top = scrollIn.offsetTop + 10 + 'px';
	// }
	}
	</script>
	</body>
	</html>
	* {
	margin: 0;
	padding: 0;
	}
	ul,
	li {
	list-style: none;
	}
	a {
	text-decoration: none;
	}
	img {
	display: block;
	}
	input {
	outline: none;
	}
	html,
	body {
	height: 100%;
	overflow: hidden;
	}
	#wrap {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	}
	#wrap .content {
	position: absolute;
	top: 0;
	left: 0;
	}
	#wrap .scrollBar {
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	height: 100%;
	border-left: 1px solid grey;
	border-right: 1px solid grey;
	}
	#wrap .scrollBar .scrollIn {
	position: absolute;
	width: 35px;
	height: 30px;
	background-color: deepskyblue;
	left: 50%;
	transform: translateX(-50%);
	}
	/# sourceMappingURL=1503style.css.map /
	*{
	margin: 0;
	padding: 0;
	}
	ul,li{
	list-style: none;
	}
	a{
	text-decoration: none;

	}
	img{
	display: block;
	}
	input{
	outline:none;
	}
	html,body{
	height: 100%;
	overflow: hidden;
	}
	#wrap{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;

	.content{
	position: absolute;
	top: 0;
	left: 0;
	}

	.scrollBar{
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	height: 100%;
	border-left: 1px solid grey;
	border-right: 1px solid grey;

	.scrollIn{
	position: absolute;
	width: 35px;
	height: 30px;
	background-color: deepskyblue;
	//margin: 0 auto;
	left: 50%;
	transform: translateX(-50%);
	}
	}
	}