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>
|