CSS Smooth Scrolling Box in Canvas

Create a smooth scrolling effect in Canvas using CSS

You can add an element to your institution code to enable smooth scrolling within a scroll box interaction. This does require access to the Canvas Theme Editor to add the code to your institution CSS:

.smooth {

scroll-behavior: smooth;

}

You can change the class from .smooth to something else if you prefer. Once you have the code uploaded to your CSS, to create the rest of the effect, grab my code and put it on a Canvas sandbox page:

<div class="shadow1" style="float: right; margin: 30px;">
  <div style="background-color: #c4d4cf; display: block; padding: 15px 0; text-align: center; width: 400px;">
    <a style="color: #334741; margin: 0 2em; text-decoration: none;" href="#firstly">first</a> 
    <a style="color: #334741; margin: 0 2em; text-decoration: none;" href="#second">second</a> 
    <a style="color: #334741; margin: 0 2em; text-decoration: none;" href="#third">third</a>
  </div>
  <div class="smooth" style="background-color: #eaeaea; display: block; height: 400px; overflow-y: scroll; text-align: center; width: 400px;">
    <div id="firstly" style="background-color: #e5f1e4; display: flex; align-items: center; justify-content: center; width: 100%; height: 400px;">This is the first section</div>
    <div id="second" style="background-color: #e5dce0; display: flex; align-items: center; justify-content: center; width: 100%; height: 400px;">This is the second section</div>
    <div id="third" style="background-color: #d9f0fc; display: flex; align-items: center; justify-content: center; width: 100%; height: 400px;">This is the third section</div>
  </div>
</div>

To get the shadow effect [class="shadow1"], refer to my tutorial on drop shadows in Canvas. It’s a very snazzy effect. Once you have the rest of the code working in Canvas, swap out the text and properties and customize it to work for you! Create your own color palettes at https://coolors.co/.

---

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas