In this project I learnt how to make a horizontal scrolling website.
- horizontal scrolling CSS tricks https://css-tricks.com/pure-css-horizontal-scrolling/
- horizontal scrolling hubspot https://blog.hubspot.com/website/horizontal-scrolling
- digital ocean https://www.digitalocean.com/community/tutorials/implementing-a-scroll-based-animation-with-javascript
- mdn client width https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth
- mdn resize observer https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
- Create a flex wrapper with height and width of 100vh/vw
- Create nested div with the following CSS values
- display: flex;
- width: 100vw;
- flex-shrink: 0; Flex will set all inner contents side by side horizontally. 100vw will ensure that the contents of the div take up all screen width flex-shrink: 0; ensures that each child component individually takes up full screen width (individual children are not shrunk so that all children are within the screen, rather overflow takes place)
- Place some content in the nested div...
- Finally let's add the js. We will
- Target the wrapper element
- add a scroll event listener
wrapper.addEventListener('wheel', transformScroll);
- Pass in call back
- prevent default bevhaviour
- leverage scrollTo()
- pass in options
{ top: 0, left: wrapper.scrollLeft += e.deltaY, behavior: 'smooth', }
You will notice that the value of wrapper.scrollLeft + window.innerWidth is equal to wrapper.scrollWidth.
scrollLeft takes you as far as it can go, but scrollWidth includes the innerWidth to. It takes you to the end of all content.