Forum Discussion
Scrolling with JS
I use a lot of scrolling, so I added here two types with simple JS (just copy and paste from YouTube comments)
1. Scrolling the entire slide is useful for simulating interfaces like Figma or large canvases. Zoom in/out with Ctrl+Scroll and move around freely.
2. Auto-scrolling a panel – perfect for text boxes or scrolling objects. When the slide loads, the content scrolls down smoothly to show that it’s interactive.
This is the link to see how:
https://youtu.be/TanOufT30vE?si=9XmJEWfe7ky6HNIQ
3 Replies
- KataharCommunity Member
Cześć. Dziękuję za podzielenie się swoją metodą. Jest bardzo przydatna. I copied the ENTIRE code from June 27th. However, after pasting it into the slide, nothing happens with my scroll panel. Do I need to change any object names in the code?
- BarMazuzCommunity Member
Hi Katahar, no, I didn't touch the default storyline name. If you are trying Scrolling the entire slide JS, pay attention that the JS starts at the first row without any other lines copied before it (like you might have copied this also: 1. Scrolling the entire slide JS, or is there a blank line there?).
Also, make sure this is the first trigger on your slide. Move it upward if not.
You can upload a version of what you did here, and I'll do my best to detect the problem and help you with it!
- KataharCommunity Member
Dziękuję za tak szybką odpowiedź. Chciałem użyć kodu do automatycznego przewijania panelu przewijania. Tak to wygląda u mnie. Kod wygląda następująco:
console.log("�� Skrypt automatycznego przewijania rozpoczyna się...");
function autoScrollTargetElement() {
const scrollContainer = document.querySelector('tekst'); // Dostosuj, jeśli to konieczne
if (!scrollContainer) {
console.warn("⚠ .scrollarea-area nie znaleziono.");
return;
}
console.log("✅ .scrollarea-area znaleziono, rozpoczynanie przewijania...");
let scrollAmount = 0;
const maxScroll = scrollContainer.scrollHeight - scrollContainer.clientHeight;
const step = 1;
const interval = 20;
const scrollInterval = setInterval(() => {
scrollAmount += step;
scrollContainer.scrollTop = scrollAmount;
if (scrollAmount >= maxScroll) {
clearInterval(scrollInterval);
console.log("�� Przewijanie zakończone.");
}
}, interval);
}
// Poczekaj, aż Storyline i DOM zostaną w pełni załadowane
function waitForScrollableArea() {
const check = setInterval(() => {
const container = document.querySelector('tekst');
if (container) {
clearInterval(check);
autoScrollTargetElement();
}
}, 100);
}
waitForScrollableArea();
Related Content
- 6 months ago
- 5 months ago
- 3 months ago