https://tammelinn.ee/javascripts/scroll.js

1window.smoothScroll =  () => {
2	// Set CSS `tranform` property for an element
3	function setTransform (el, transform) {
4	  el.style.transform = transform
5	  el.style.WebkitTransform = transform
6	}
7  
8	// Current scroll position
9	var current = 0
10	// Target scroll position
11	var target = 0
12	// Ease or speed for moving from `current` to `target`
13	var ease = 0.075
14	// Utility variables for `requestAnimationFrame`
15	var rafId = undefined
16	var rafActive = false
17	// Container element
18	var container = document.querySelector('#page')
19	
20	// Variables for storing dimmensions
21	var windowWidth, containerHeight;
22  
23	// The `fakeScroll` is an element to make the page scrollable
24	// Here we are creating it and appending it to the `body`
25	var fakeScroll = document.createElement('div')
26	fakeScroll.className = 'fake-scroll'
27	document.body.appendChild(fakeScroll)
28	// In the `setupAnimation` function (below) we will set the `height` properly
29  
30	// Geeting dimmensions and setting up all for animation
31	function setupAnimation () {
32	  // Updating dimmensions
33	  windowWidth = window.innerWidth
34	  containerHeight = container.getBoundingClientRect().height
35
36	  // Set `height` for the fake scroll element
37	  fakeScroll.style.height = containerHeight + 'px'
38	  // Start the animation, if it is not running already
39	  startAnimation()
40	}
41  
42	// Update scroll `target`, and start the animation if it is not running already
43	function updateScroll () {
44	  target = window.scrollY || window.pageYOffset
45	  startAnimation()
46	}
47  
48	// Start the animation, if it is not running already
49	function startAnimation () {
50	  if (!rafActive) {
51		rafActive = true
52		rafId = requestAnimationFrame(updateAnimation)
53	  }
54	}
55  
56	// Do calculations and apply CSS `transform`s accordingly
57	function updateAnimation () {
58	  // Difference between `target` and `current` scroll position
59	  var diff = target - current
60	  // `delta` is the value for adding to the `current` scroll position
61	  // If `diff < 0.1`, make `delta = 0`, so the animation would not be endless
62	  var delta = Math.abs(diff) < 0.1 ? 0 : diff * ease
63  
64	  if (delta) { // If `delta !== 0`
65		// Update `current` scroll position
66		current += delta
67		// Round value for better performance
68		current = parseFloat(current.toFixed(2))
69		// Call `update` again, using `requestAnimationFrame`
70		rafId = requestAnimationFrame(updateAnimation)
71	  } else { // If `delta === 0`
72		// Update `current`, and finish the animation loop
73		current = target
74		rafActive = false
75		cancelAnimationFrame(rafId)
76	  }
77  
78	  // Set the CSS `transform` corresponding to the custom scroll effect
79	  setTransform(container, 'translateY('+ -current +'px)')
80	}
81  
82	// Listen for `resize` event to recalculate dimmensions
83	window.addEventListener('resize', setupAnimation)
84	// Listen for `scroll` event to update `target` scroll position
85	window.addEventListener('scroll', updateScroll)
86  
87	// Initial setup
88	setupAnimation()
89}