Scrolling Content Box

Sometimes, we have a lot of information to fit on a page, but unfortunately, the farther down you make people scroll, the less likely they are to actually do it - and they'll miss important information as a consequence! Our solution? A scrolling content box! This is perfect for when you have large tables or lists but want folks to keep reading afterwards. Best of all, this trick is fully screen-reader accessible.

Here's a list that would take up much more real estate if it weren't contained in a scroll box!

Origami Folds and Maneuvers!

Valley Fold
Mountain Fold
Squash Fold
Sink Fold
Petal Fold
Reverse Fold
Inside Reverse Fold
Cupboard/Book Fold
Rabbit Ear Fold
Double Rabbit Ear Fold
Closed Sink Fold
Collapse from Crease Pattern

The Code Snippet

<div style="overflow-y: scroll; height: 175px; width: 50%;"><p>Your Content</p></div>

Anatomy of the Code Snippet

A description of the code snippet's parts.

Steps to Create a Scrolling Content Box

Highlight and copy the code snippet.
Navigate to a Canvas page and go to Edit mode.
Switch to the HTML Editor.
Paste the code snippet where you'd like your content box to go!
Add your content to the 'Your Content' spot! You can also switch back to the Rich Content Editor and add your content directly to the scroll box from there!
Save your work!

Modify the Code

Make the scroll box wider by changing the percent value of the width property.
Change the scroll box's maximum height by changing the pixel value of the height property. This is useful if you've included an image in your scroll box and want users to be able to see it all at once!
The scroll box works with whatever content you'd like to put in it! This includes not just text, but images, videos, and other embedded tools.
Ready to play? You can combine the scroll box with other code snippets! Try adding a background color to start! (There's a bonus code snippet in Examples that has a background color already!)

Troubleshooting

If your attempts to change the height and width of the box go awry, compare your HTML to the code snippet. Check to make sure you haven't deleted any colons, semi-colons, or letters. If all else fails, it may be easier to start over with the fresh code snippet than to fix it.

Examples

This box is skinnier, taller, and has a background color! The code snippet for this scroll box is:

<div style="overflow-y: scroll; height: 250px; width: 30%; background: #ddeedd;">
<p>CONTENT HERE</p>
</div>

This sentence is only here to make the box scroll!