smooth-scroll/smooth-scroll.html at master · LRNWebComponents/smooth-scroll · 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
<link rel="import" href="../polymer/polymer.html">

<!--
`smooth-scroll`

@demo demo/index.html
Smooth scroll an element

@microcopy - this is element provides methods to be called for smooth scrolling
 - scroll()
-->

<dom-module id="smooth-scroll">
  <script>
    Polymer({
      is: 'smooth-scroll',
      properties: {},
      /**
      * Smooth scroll an elment into view
      * @target {Node} DOM node object
      * @options {object}
      *           - align (top, center, bottom)
      *           - delay
      *           - duration
      *           - scrollElement
      */
      scroll: function (target, options) {
        // define default options
        const defaultOptions = {
          align: 'top',
          delay: 0,
          duration: 300,
          scrollElement: window
        }
        // combine default and user defined options
        const _options = Object.assign({}, defaultOptions, options)
        // get the bound client
        const targetPosition = target.getBoundingClientRect()
        // get the scroll Element position
        const scrollElementPosition = _options.scrollElement.getBoundingClientRect()
        // get the height of the scroll Element
        const scrollElementHeight = _options.scrollElement.getBoundingClientRect().bottom - _options.scrollElement.getBoundingClientRect().top
        // get the height of the element target
        const targetHeight = targetPosition.bottom - targetPosition.top
        // get the offset of the scroll Element
        const startPosition = _options.scrollElement.scrollTop
        // get the distance between the top of the scroll and the top of the bounding rectangles
        let distance = target.getBoundingClientRect().top - _options.scrollElement.getBoundingClientRect().top
        /**
         * @todo weird trick to position the scroll over the target
         * I'm still not sure why this works :)
         */
        distance = distance - (scrollElementHeight / 2)

        // see where the user wants to align the scroll
        switch (_options.align) {
          case 'center':
            distance = distance + (targetHeight / 2)
            break;
          case 'bottom':
            distance = distance + (targetHeight)
            break;
          default:
            break;
        }

        // record start time
        let startTime = null

        // internal animation function
        function animation (currentTime) {
          if (startTime === null) startTime = currentTime
          let timeElapsed = currentTime - startTime
          let run = ease(timeElapsed, startPosition, distance, _options.duration)
          _options.scrollElement.scrollTop = run
          if (timeElapsed < _options.duration) requestAnimationFrame(animation)
        }

        // define a ease-in-out
        function ease (t, b, c, d) {
          if ((t/=d/2) < 1) return c/2*t*t + b
          return -c/2 * ((--t)*(t-2) - 1) + b
        }

        // start animation
        requestAnimationFrame(animation)
      },
    });
  </script>
</dom-module>