js-tutorial-scrollbar/scrollbar.js at master · nhenezi/js-tutorial-scrollbar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
var myScrollbar = (function() {
  var _config = {};

  function start(config) {

    config = config || {};
    //parse config properties
    _config.content = config.content || "content";

    //get node
    _config.content = document.getElementById(_config.content);

    //create wrapper and wrap around content
    _config.wrapper = document.createElement("div");
    _config.wrapper = _config.content.parentElement.insertBefore( _config.wrapper,
                                                                  _config.content);
    _config.wrapper.appendChild(_config.content);
    _config.wrapper.style.height = _config.content.offsetHeight + "px";
    _config.wrapper.style.width  = (_config.content.offsetWidth + 10) + "px";
    _config.wrapper.className    = "myScrollbar_wrapper";

    //create scrollbar wrapper
    _config.scrollbarW = document.createElement("div");
    _config.scrollbarW = _config.wrapper.appendChild(_config.scrollbarW);
    _config.scrollbarW.className = "scrollbar_wrapper";

    //create scrollbar
    _config.scrollbar  = document.createElement("div");
    _config.scrollbar  = _config.scrollbarW.appendChild(_config.scrollbar);
    _config.scrollbar.className = "scrollbar";

    //set size of scrollbar
    _config.scrollbar.style.height = (_config.wrapper.offsetHeight * 1/3) + "px";

    //for each pixel movement on scrollbar we have to move _config.ratio pixels in content
    _config.ratio = ((_config.wrapper.scrollHeight - _config.scrollbarW.offsetHeight)
                     / (_config.scrollbarW.offsetHeight - _config.scrollbar.offsetHeight));

    //ratio is caclulated this way: number of pixels you can to move in content
    //                            / number if pixels you can move in scrollbar wrapper
    //number of pixels you move in content is size of content - visible content
    //number of pixels you move in scrollbar wrapper is size of scrollbar wrapper - size of scrollbar

    //define events
    _config.scrollbar.events = {
      "mousedown":  enableMoving,
      "mousemove":  moveContent,
      "mouseup":    stopMoving,
      "mouseleave": stopMoving
    };

    //bind them
    for (var value in _config.scrollbar.events) {
      _config.scrollbar.addEventListener(value, _config.scrollbar.events[value], false);
    }

  }

  function enableMoving(e) {
    e.preventDefault();
    _config.scrollbar.className = "scrollbar draggable";

    //starting position is set to middle of scrollbar, so when user grabs scrollbar, he grabs it by middle
    // e.clientY - e.layerY = top side of scrollbar (event is activated when clicked on scrollbar)
    // _config.scrollbar.offsetHeight * 1/2 = distance from top side of scrollbar to middle
    _config.scrollbar.startDrag =
      _config.scrollbar.startDrag || (e.clientY - e.layerY + _config.scrollbar.offsetHeight * 1/2);
  }

  function stopMoving(e) {
    _config.scrollbar.className = "scrollbar";
  }

  function moveContent(e) {
    e.preventDefault();
    if (_config.scrollbar.className === "scrollbar draggable") {
      _config.scrollbar.top =  (e.clientY - _config.scrollbar.startDrag);

      //if we move to far to top
      if (_config.scrollbar.top < 0) {
        _config.scrollbar.top = 0;
      }
      //if we move to far to bottom
      //we cannot move scrollbar for whole size of scrollbar wrapper, we are actually moving it from
      //bottom part of scrollbar to bottom part of scrollbar wrapper
      else if (_config.scrollbar.top > _config.scrollbarW.offsetHeight - _config.scrollbar.offsetHeight){
        _config.scrollbar.top = _config.scrollbarW.offsetHeight - _config.scrollbar.offsetHeight;
      }

      _config.scrollbar.style.top = _config.scrollbar.top + "px";
      //for every n pixel of movements in scrollbar we have to move _config.ration * n pixels in content
      _config.content.style.top = -(_config.scrollbar.top * _config.ratio) + "px";
    }
  }

  function getConfig() {
    return _config;
  }

  return {
    getConfig: getConfig,
    start: start
  };

})();

myScrollbar.start();