Forum Discussion

BarMazuz's avatar
BarMazuz
Community Member
3 months ago

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

  • Katahar's avatar
    Katahar
    Community 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?

    • BarMazuz's avatar
      BarMazuz
      Community 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!

  • Katahar's avatar
    Katahar
    Community 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();