Webflow + Tables

Scrolling Tables

Overview
Approaches to Tables
DataTables & JS Libraries
200
SA5 Embed Tables
201
Markdown Tables
203
Google Slides
206
Static Tables
208
Collection List Tables
210
UX Notes
Scrolling Tables
300
No items found.
Published
August 3, 2023
Updated
in lightbox

There are several ways to indicate and support scrolling for users, especially when they might not be able to see the scrollbar.

Here are a few other options;

  1. Scrolling Hints: Use visual hints to indicate that content is scrollable. For instance, you can "fade out" the end of the content, giving a visual cue that there is more content available if the user scrolls.
  2. Custom Scrollbars: You can use a library like SimpleBar or Perfect Scrollbar to create custom scrollbars that are more prominent and easier to interact with. Note that custom scrollbars aren't always recommended, as they can interfere with the default scrolling behaviour that users are familiar with.
  3. Scroll Buttons: You can add "scroll up" and "scroll down" buttons at the top and bottom of the scrollable area. When the user clicks these buttons, the content scrolls up or down. This can be particularly helpful for users who may have difficulty with traditional scrolling methods.
  4. Scroll Indicators: Similar to a progress bar, a scroll indicator shows how far through the content the user has scrolled. This gives users a sense of how much content is left.
  5. Mouse Wheel and Keyboard Support: Ensure that the scrollable area supports both mouse wheel scrolling and keyboard navigation (with the arrow keys and Page Up/Page Down keys). This can help provide a more accessible user experience.

Notes

Scrolling Hints

This is incomplete, but provides a starting point for scrolling hints.

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.