UNI
/
IM_PC


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Title</title>
	<style type="text/css">
		body{
			margin: 0 auto;
			padding: 100px 100px;
		}
		#app{
			width: 500px;
			height: 500px;
			border: 1px solid darkgray;
		}
		#tp{
			overflow-y: auto;
			width: 100%;
			height: 50px;
			border: 1px solid red;
		}
		#bt{
			width: 100%;;
			height: 450px;
			border: 1px solid red;
		}
		#bd{
			border: 1px solid #7f7f7f;
			cursor: s-resize;
		}
		
		/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
		::-webkit-scrollbar {
			width: 10px;
			background-color: #fff;
		}
		
		/*定义滚动条轨道 内阴影+圆角*/
		
		/*::-webkit-scrollbar-track {
			display: none;
		}*/
		
		/*定义滑块 内阴影+圆角*/
		::-webkit-scrollbar-thumb {
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 6px rgba(253, 253, 253, 0.3);
			background-color: #919191;
		}
		/*定义最上方和最下方的按钮*/
		/*::-webkit-scrollbar-button{
			display: none;
		}*/
	</style>
</head>
<body>
	<div id="app">
		<div id="tp" contenteditable='true'>/*/798787888888888888888888888888888888</div>
		<div id="bd"></div>
		<div id="bt"></div>
	</div>
</body>
<script>
	window.onload = function () {
		var bd = document.getElementById('bd')
        var tp = document.getElementById('tp')
        var bt = document.getElementById('bt')
		var initY = 0, tph = 0, bth = 0
		bd.onmousedown = function (ev) {
		    tph = tp.offsetHeight
			bth = bt.offsetHeight
            initY = (ev||event).clientY
			console.log('点击：上高' + tph + '  下高'+ bth + '  初始y'+initY)
            document.onmousemove = function (ev2) {
                tp.style.cursor = 's-resize'
	            var y = (ev2||event).clientY
	            tp.style.height = (tph + (y - initY)) +'px'
                bt.style.height = (bth - (y - initY)) +'px'
	            console.log('移动 y='+ y + '差值' + (y - initY) + '上高'+tp.style.height + '下高'+bt.style.height)
            }
        }
        document.onmouseup=function(){
            document.onmousedown=null;
            document.onmousemove=null;
        };
    }
</script>
</html>