Show sourcecode

The following files exists in this folder. Click to view.

public_html/gamla-kurser/webbutv1/js/

dark-light.js
scrollbar.js
tabs.js

`scrollbar.js`

23 lines ASCII Windows (CRLF)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


// Get the chain and content elements

const chain = document.querySelector('.chain');

const content = document.querySelector('.content');



// Add scroll event listener to the content

content.addEventListener('scroll', () => {

  // Calculate the percentage scrolled

  const scrollPercentage = (content.scrollTop / (content.scrollHeight - content.clientHeight)) * 100;



  // Set the height of the chain based on the scroll percentage

  chain.style.height = `${scrollPercentage}%`;

});



// Add click event listener to the chain

chain.addEventListener('click', (event) => {

  // Calculate the scroll position based on the click position

  const clickPercentage = (event.clientY / window.innerHeight) * 100;

  const scrollTo = (clickPercentage / 100) * (content.scrollHeight - content.clientHeight);



  // Scroll the content to the calculated position

  content.scrollTop = scrollTo;

});