第48天:垂直滚动条

简介: 垂直滚动条 1 DOCTYPE html> 2 3 4 5 6 7 .box { 8 width: 300px; 9 height: 500px; 10 ...

垂直滚动条

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         .box {
  8             width: 300px;
  9             height: 500px;
 10             border: 1px solid red;
 11             margin:100px;
 12             position: relative;
 13         }
 14         .content {
 15             height: auto;
 16             padding: 5px 18px 5px 5px;
 17             position: absolute;
 18             top: 0;
 19             left: 0;
 20         }
 21         .scroll {
 22             width: 18px;
 23             height: 100%;
 24             position: absolute;
 25             top: 0;
 26             right: 0;
 27             background-color: #eee;
 28         }
 29         .bar {
 30             width: 100%;
 31             height: 100px;
 32             background-color: red;
 33             cursor: pointer;
 34             border-radius: 10px;
 35             position: absolute;
 36             top: 0;
 37             left: 0;
 38         }
 39     </style>
 40 </head>
 41 <body>
 42 <div class="box" id="box">
 43     <div class="content">
 44      文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
 45      文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
 46      文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
 47      文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
 48      文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
 49      文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
 50      文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
 51      文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
 52 
 53     </div>
 54     <div class="scroll">
 55         <div class="bar"></div>
 56     </div>
 57 </div>
 58 </body>
 59 </html>
 60 <script>
 61     var box = document.getElementById("box");  // 最大的盒子
 62     var content = box.children[0];  // 内容盒子
 63     var scroll = box.children[1];  // 右边盒子
 64     var bar = scroll.children[0];
 65    // 1. 首先先要计算红色滚动条的高度    内容越多,滚动条越短    反之  反之
 66    // 滚动条的长度计算公式:  容器的高度 / 内容的高度 * 容器的高度
 67    // box 是 内容盒子一半  那么红色盒子也要是box盒子的一半
 68     var barHeight = box.offsetHeight / content.offsetHeight * box.offsetHeight;
 69     bar.style.height = barHeight + "px";
 70    // 下面开始 拖动 红色盒子
 71     startScroll(bar,content);  // 第一次参数 拖动的   第二个参数 内容的盒子
 72    function startScroll(obj,target) {
 73        obj.onmousedown = function(event) {
 74            // alert(11);
 75            var event = event || window.event;
 76            var t = event.clientY - this.offsetTop ; // 红色盒子距离 父亲 盒子顶部距离
 77            var that = this;  // 把 bar 对象给 that 对象
 78            document.onmousemove = function(event) {
 79                var event = event || window.event;
 80                var barTop = event.clientY - t ;  // 红色移动的距离
 81                //内容盒子要移动距离
 82                // (内容盒子高度 -  大盒子高度) /  (大盒子高度 - 红色盒子的高度)   * 红色盒子移动的数值
 83                var contentTop = (target.offsetHeight - target.parentNode.offsetHeight) / (target.parentNode.offsetHeight - that.offsetHeight) *  barTop;
 84                // 内容盒子移动的距离
 85                if(barTop < 0)
 86                {
 87                    barTop = 0;
 88                }
 89                else if(barTop > target.parentNode.offsetHeight - that.offsetHeight)
 90                // 大于  大盒子的高度  -  红色盒子的高度
 91                {
 92                    barTop = target.parentNode.offsetHeight - that.offsetHeight ;
 93                }
 94                else
 95                {
 96                    target.style.top = -contentTop + "px";  // 往上走是负值
 97                }
 98                that.style.top = barTop + "px";
 99                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();   // 防止拖动滑块的时候, 选中文字
100            }
101        }
102            document.onmouseup = function() {
103              document.onmousemove = null;
104        }
105    }
106 </script>

运行效果:

附加:

 

相关文章
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
5月前
|
前端开发 定位技术
让一个父元素中的子元素垂直水平居中的方法
让一个父元素中的子元素垂直水平居中的方法
31 1
|
5月前
背景图像 - 水平或垂直平铺
背景图像 - 水平或垂直平铺。
49 2
|
5月前
横向滑块
横向滑块
72 7
水平居中 #31
水平居中 #31
52 0
|
数据可视化 API
滚动条还能这么玩
滚动条作为网页开发中常见的元素,承担了重要的作用,使连续的文本、图片或任何其他内容可以在计算机显示器、窗口或视窗上按预定的方向(上、下、左或右)滚动,以便所有内容都可以查看。
141 0
滚动条还能这么玩
|
C#
C#中,让按钮文字垂直水平都居中
C#中,让按钮文字垂直水平都居中
146 0
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(2)
内边距会影响盒子的可见框的大小,元素的背景会延伸到内边距,盒子的大小由内容区、内边距和边框共同决定。外边距指的是当前盒子与其他盒子之间的距离,他不会影响可见框的大小,而是会影响到盒子的位置。
186 0
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(2)
|
前端开发
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(1)
网页是一个多层的结构,设置样式样式,也是一层一层的设置,最终我们看到的最上面的一层。
118 0
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(1)
|
前端开发
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(4)
通过本章认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法
140 0