How to Enable Keyboard Scrolling in Storyline 360 Using Simple JavaScript

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.

Click Preview to see How to Enable Keyboard Scrolling in Storyline 360 with a Simple JavaScript Fix.

Preview

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

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

The Problem with Scroll Panels in Storyline 360

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.

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 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.

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;
}

});

})();

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

Want more advanced Storyline tips and techniques?

Explore free Storyline 360 tutorials, including JavaScript hacks and eLearning solutions designed to elevate your course design.

Explore Free Tutorials

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

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.

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.

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.

Ready to transform your training with AI-optimized eLearning?

Partner with Swift eLearning services for custom development, advanced interactivity and next-gen digital training solutions.