How to Enable Keyboard Scrolling in Storyline 360 Using JS

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.