Accessibility and user experience are no longer optional in modern eLearning, they are essential. In Articulate Storyline 360, scroll panels are great for presenting long content, but there is a limitation: they typically only work with mouse scrolling. This creates accessibility and usability challenges for learners who rely on keyboards.
Click Preview to see How to Enable Keyboard Scrolling in Storyline 360 with a Simple JavaScript Fix.
This article shows you exactly how to enable keyboard control (arrow keys) for scroll panels using JavaScript, making your courses more accessible, interactive and aligned with accessible eLearning design best practices.
Whether you are a designer, developer or eLearning consultant, this tutorial will help you implement a simple yet powerful enhancement that improves usability and learner engagement using JavaScript in Storyline 360.
Why Keyboard Accessibility Matters in eLearning
Before going into the solution, let’s understand the value.
1. Accessibility Compliance (WCAG)
Keyboard navigation is a key requirement for:
- WCAG compliance in eLearning
- Government and corporate compliance standards
- Inclusive learning design
2. Improved User Experience
Many learners:
- Prefer keyboard shortcuts
- Use assistive technologies
- Navigate faster with keys than a mouse
This directly improves eLearning user experience design and usability.
3. Better Engagement & Retention
Interactive and responsive controls:
- Reduce frustration
- Increase completion rates
- Enhance learner satisfaction
A key principle of interactive eLearning design.
How Scroll Panels Work in Storyline 360
Scroll panels in Storyline 360 are essentially containers with overflow content. If you’re new, explore more about scroll panels in Storyline 360 and how they structure content.
However, Storyline does not provide built-in keyboard navigation for them.
The Problem with Scroll Panels in Storyline 360
By default:
- Scroll panels only respond to mouse scroll
- Arrow keys (↑ ↓) do not work
- Keyboard users are blocked from full interaction
This creates:
- Accessibility issues
- Poor UX for keyboard-dependent users
- Incomplete interactivity
These limitations are often addressed using Storyline 360 advanced features and custom scripting.
The Solution: Use JavaScript to Enable Arrow Key Scrolling (Keyboard Control)
This approach uses custom interactions in Storyline 360 powered by JavaScript.
Step 1: Open Your Storyline 360 Project
● Launch Articulate Storyline 360
● Open your .story file
Step 2: Navigate to the Target Slide
● Go to the slide containing the scroll panel
● Ensure the panel is already set up and functional
Step 3: Preview the Slide (Optional Check)
● Click Preview
● Try using Up/Down arrow keys
- Notice: It doesn’t scroll
Step 4: Add a JavaScript Trigger
● Select the slide
● Go to Triggers panel
● Click Create New Trigger
● Set:
- Action: Execute JavaScript
- When: Timeline starts
- Object: This slide
Step 5: Insert the JavaScript Code
Click Edit JavaScript and paste the following:
(function () {
function getScrollPanel() {
var allDivs = document.querySelectorAll(“div”);
for (var i = 0; i < allDivs.length; i++) { var el = allDivs[i];
// Find true scrollable element
if (el.scrollHeight > el.clientHeight) {
var style = window.getComputedStyle(el);
if (style.overflowY === “auto” || style.overflowY === “scroll”) {
return el;
}
}
}
return null;
}
document.addEventListener(“keydown”, function (e) {
var panel = getScrollPanel();
if (!panel) return;
if (e.key === “ArrowDown”) {
e.preventDefault();
panel.scrollTop += 50;
}
if (e.key === “ArrowUp”) {
e.preventDefault();
panel.scrollTop -= 50;
}
});
})();
Step 6: Preview and Test
● Click Preview Slide
● Press:
- ↓ Arrow → Scrolls down
- ↑ Arrow → Scrolls up
If you’re new, check a Storyline 360 tutorial for beginners.
Best Practices for Storyline JavaScript
- Keep scripts lightweight
- Avoid conflicts with built-in triggers
- Test across devices and browsers
- Document your code for future updates
Follow best practices in rapid eLearning development to maintain performance and scalability.
Summary
By adding a small JavaScript snippet, you can transform a basic scroll panel into a keyboard-accessible, user-friendly interaction in Storyline 360.
This simple enhancement:
- Improves accessibility
- Boosts learner experience
- Adds professional polish to your course
A great step toward custom eLearning development solutions that deliver real impact.
Frequently Asked Questions (FAQs)
How do I add a JavaScript trigger in Storyline 360?
To add a JavaScript trigger in Storyline 360, go to the Triggers panel, create a new trigger, select “Execute JavaScript,” and set it to run when the timeline starts on the slide.
Does this JavaScript solution work for all Storyline 360 projects?
Yes, it works for most Storyline 360 projects, especially those published in HTML5 format. However, testing is recommended for complex interactions.
How do you use a scrolling panel in Storyline 360?
To use a scrolling panel in Storyline 360, go to Insert → Scrolling Panel, draw it on the slide and add content inside. If the content exceeds the panel size, a scrollbar will automatically appear.
How does keyboard scrolling improve accessibility in eLearning?
Keyboard scrolling helps users who cannot use a mouse navigate content easily, improving accessibility and supporting WCAG guidelines.
Is this solution suitable for LMS-based courses?
Yes, the JavaScript works in LMS environments like SCORM and xAPI as long as the course is published in HTML5 format.
How to scroll in Storyline 360 using keyboard?
To scroll in Storyline 360 using a keyboard, add a JavaScript trigger that listens for arrow key input and updates the scroll panel position using the scrollTop property.
