JavaScript手工编写滚动条组件

0 前言

  上周的一个练习,由于没来得及编写笔记,这里补充一下~

  虽然CSS3中提供了overflow:scroll; 来实现滚动条,但是这里可以使用原生JS来编写一个,以达到练习组件编写的效果。

  练习要点包括以下几点:

  • dom对象操作

  • 鼠标点击事件

  • 鼠标滑轮事件

  • 滚动条显示比例设计逻辑

  感兴趣的朋友欢迎点击屏幕左上角的小猫咪进入我的github,或猛戳这里下载源码~

1 需求分析

  • 需要支持鼠标点击响应:点击上下箭头时,能上下滚动文章内容。

  • 需要支持鼠标拖拽响应:拖拽滚动条并上下滚动文章内容。此外应支持拖拽过快的状况,即鼠标超出滚动条区域范围依然能够上下滚动。

  • 边界限制:当滚动条到达范围的边界的时候,必须能够停止,不得超出屏幕显示范围。

  • 对于不在显示区域的文字部分需要隐藏。

  • 这里我们只关心其实现逻辑,而不关注其展现形式上的美化。

  效果如下:

  JavaScript手工编写滚动条组件_第1张图片  JavaScript手工编写滚动条组件_第2张图片

2 实现细节

2-1 HTML结构

  结构上非常简单,两栏布局,内容文本区和滚动条区。

  滚动条区采用ul-li结构实现,分别加载图片和使用一个div。

  代码如下

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Scrolltitle>
 8     <link rel="stylesheet" href="index.css">
 9 head>
10 <body>
11     <div class="container">
12         <div class="content">
13             区域文本内容。      
14         div>
15         <ul class="scroll">
16             <li class="up"><img id="up_img" src="img/up.png" alt="">li>
17             <li class="duration"><div class="bar">div>li>
18             <li class="down"><img id="down_img" src="img/down.png" alt="">li>
19         ul>
20     div>
21     <script src="index.js">script>
22 body>
23 html>

2-2 CSS样式

 几个要点:

  • 在外层container上使用overflow:hidden隐藏超出区域范围的文本内容。

  • 选择器的使用cursor:-webkit-grab;设置一个鼠标移入的形状控制。

    • 若根据父子选择器的选择逻辑,则需要在父子标签之间添加空格,即表示选中子元素。
    • 若不添加空格,则表示的是选中同一级标签,通过多个标签来缩小选中范围。

  代码如下:

 1 *{
 2     margin: 0;
 3     padding: 0;
 4     list-style: none;
 5 }
 6 body{
 7     overflow: hidden;
 8 }
 9 .container{
10     width: 380px;
11     height: 400px;
12     margin: 100px auto;
13     border: 1px solid red;
14     position: relative;
15     overflow: hidden;
16 }
17 .container .content{
18     width: 350px;
19     position: absolute;
20     left: 0;
21     top: 0;
22 }
23 .container .scroll{
24     width: 28px;
25     height: 398px;
26     position: absolute;
27     border: 1px solid black;
28     right: 0;
29     top: 0;
30 }
31 .container .scroll li{
32     width: 100%;
33 }
34 .container .scroll li.up{
35     height: 28px;
36     cursor: pointer;
37 }
38 .container .scroll li.down{
39     height: 28px;
40     cursor: pointer;
41 }
42 .container .scroll li img{
43     height: 100%;
44     width: 100%;
45 }
46 .container .scroll li.duration{
47     height: 342px;
48     width: 100%;
49     position: relative;
50 }
51 .container .scroll .duration .bar{
52     position: absolute;
53     right: 0;
54     top: 0;
55     height: 27px;
56     width: 100%;
57     background-color: red;
58     cursor: -webkit-grab;
59 }

2-3 Javascript实现

2-3-1 模块调用入口

  在html文档引入了JS代码以后,需要一个函数调用的入口,这里我采用的是以init()函数作为主入口。最外层是一个立即执行函数,保证这一组件内部的变量只可以被内部成员访问,避免变量污染的发生。

  在入口函数init()中调用了三个函数,分别是控制拖拽的scrollDrage(ele_bar);控制点击事件的scrollClick(ele_bar);和控制滚轮事件的scrollWheel(ele_container , ele_bar);

(function(){
    function init(){
        scrollDrage(ele_bar);
        scrollClick(ele_bar);
        scrollWheel(ele_container , ele_bar);
    }
    init();
});

2-3-2 获取dom对象

  由于需要对dom元素进行操作,因此首先需要先获取到与滚轮操作有关的对象:页面容器container、文本content、滚动条中间滑动部分duration、滑块bar

  可以在初始时设置滑块bar的高度,这里采用相似变换的原理,计算其值并进行赋值即可。

  滑块高度的计算公式为:

Math.floor((container.offsetHeight / content.offsetHeight) * duration.offsetHeight)

  offsetHeight属性为获取还dom元素的height属性。

1     var ele_container = document.getElementsByClassName('container')[0];
2     var ele_content = document.getElementsByClassName('content')[0];
3     var ele_duration = document.getElementsByClassName('duration')[0];
4     var ele_bar = document.getElementsByClassName('bar')[0];
5     var percentH = Math.floor((ele_container.offsetHeight / ele_content.offsetHeight) * ele_duration.offsetHeight);
6     ele_bar.style.height = percentH + 'px

2-3-3 文本移动控制

  文本移动控制的方法同样用到了相似变换的原理,并根据计算的高度,修改文本context的top值。

  传入的参数为滑块bar对象,在鼠标事件中调用该方法。

  注意:由于向下查看内容时,文本是向上移动的,因此这个top值需要设置为负值

1     function contentMove(item){
2         var percentHeight = item.offsetTop / (ele_duration.offsetHeight - item.offsetHeight);
3         var moveH = percentHeight * Math.floor(ele_content.offsetHeight - ele_container.offsetHeight);
4         ele_content.style.top = -moveH + 'px';
5     }

2-3-4 鼠标拖拽事件

在这一部分有以下几点注意:

  • e = e||window.event 一般在获取事件对象e的时候要如此给一个初值,大体上是为了给firefox做一个兼容,细节上的讨论可以参考这篇文章。 

  • e.preventDefault()这里是为了阻止事件的默认动作,比如提交表单等。

  • 通过e.pageY来获取点击位置的y坐标。关于使用事件对象e来获取点击位置坐标的方法有screen,offset,page和client四种。

    • event.clientX、event.clientY

      鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

    • event.pageX、event.pageY

      类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性

    • event.offsetX、event.offsetY

      鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性

    • event.screenX、event.screenY

      鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

    • 用一张图可以表示成下图所示

          JavaScript手工编写滚动条组件_第3张图片

  • 鼠标事件绑定的对象:需要确定鼠标事件的作用范围,因此必须明确鼠标事件所绑定的对象。对于mousedown事件,就需要绑定到bar滑块对象上;而mousemove和mouseup事件,则需要绑定在document对象上(即整个窗口)。这是为了避免鼠标移动过快,而导致鼠标移出滑块区域导致鼠标事件响应失效。

  • 解除绑定:当mouseup时,需要解除mousemove的绑定,只需为mousemove赋值为null即可。

  • 获取当前对象相对其父元素的top值:offsetTop,进而根据此值,来更新鼠标拖拽的滑块位置。

 1     function scrollDrage(item){
 2         item.onmousedown = function(e){
 3             e = e || window.event;
 4             e.preventDefault();
 5             var e_y = e.pageY;
 6             document.onmousemove = function(e){
 7                 var chay = e.pageY - e_y;
 8                 item.style.top = item.offsetTop + chay + 'px';
 9                 e_y = e.pageY;
10 
11                 if(item.offsetTop <= 0){
12                     item.style.top = 0 + 'px';
13                 }
14                 else if(item.offsetTop + item.offsetHeight >= ele_duration.offsetHeight){
15                     item.style.top = ele_duration.offsetHeight - item.offsetHeight + 'px';
16                 }
17                 contentMove(item);
18             }  
19         }
20         document.onmouseup = function(){
21             document.onmousemove = null;
22         }
23     }

2-3-5 鼠标点击上下箭头移动事件

这里的要点有:

  • e.target:
    • target定义:

      target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

    • 语法:

      event.target

      event.target.nodeName    //获取事件触发元素标签name(li,p...)

      event.target.id       //获取事件触发元素id

      event.target.className  //获取事件触发元素classname

      event.target.innerHTML  //获取事件触发元素的内容(li)

      等等。

    • 这里我用e.target.id来判断是上翻还是下翻页面。
  • 边界判断:

    这里仍要进行边界判断,比如offsetTop <= 0的情况和bar.offsetTop + bar.offsetHeight >= scroll.offsetHeight的情况需要直接赋予边界值,保证滑块不会从临界值超出范围。

 1     function scrollClick(item){
 2         var ele_scroll = document.getElementsByClassName('scroll')[0];
 3         var speed = 5;
 4         ele_scroll.onclick = function(e){
 5             // console.log(e.target.id);
 6             if(e.target.id == 'up_img'){
 7                 item.style.top = item.offsetTop - speed + 'px';
 8                 if(item.offsetTop <= 0){
 9                     item.style.top = 0 + 'px';
10                 }
11             }
12             else if(e.target.id == 'down_img'){
13                 item.style.top = item.offsetTop + speed + 'px';
14                 if(item.offsetTop + item.offsetHeight >= ele_duration.offsetHeight){
15                     item.style.top = ele_duration.offsetHeight - item.offsetHeight + 'px';
16                 }
17             }
18             contentMove(item);
19         }
20     }

2-3-6 鼠标滚轮控制

  • 通过onmousewheel绑定滚轮事件,e.wheelDelta表示滚轮方向,为正向上,负向下。

  • 同样要施加一个边界判断。其他流程与2-3-5完全类似。

 1     function scrollWheel(container , item){
 2         var speed = 5;
 3         container.onmousewheel = function(e){
 4             // console.log(e.wheelDelta); //上下滑动滑轮
 5             if(e.wheelDelta > 0){ //向上滑动滑轮
 6                 item.style.top = item.offsetTop - speed + 'px';
 7                 if(item.offsetTop <= 0){
 8                     item.style.top = 0 + 'px';
 9                 }
10             }
11             else{
12                 item.style.top = item.offsetTop + speed + 'px';
13                 if(item.offsetTop + item.offsetHeight >= ele_duration.offsetHeight){
14                     item.style.top = ele_duration.offsetHeight - item.offsetHeight + 'px';
15                 }
16             }
17             contentMove(item);
18         }
19     }

3 总结

  通过练习基础组件的写法,达到基础巩固的目的。但还是不要忘记使用overflow:scroll;这种自动实现滚动条的方法。

 

转载于:https://www.cnblogs.com/chrischen98/p/10765150.html

你可能感兴趣的:(javascript,ViewUI)