IntroJS scrolling not working

Question

I'm using IntroJs on my page to show a tour. In general everything works fine, but theres one Problem:

On one page, IntroJS ist not able to scroll, because I have something like a div, that's scrolling on the div itself, so not the whole page is scrolling, but the div is scrollable. Now when I define the elements of the tour on elements that are currently viewable everything works fine, but if you would have to scroll down in the div, it doesn't work any more (it actually tries to scroll down the complete page and shows the step in the middle of nowhere.

This is how I defined the tour:

this.intro = introJsModule.introJs();
    this.intro.setOptions({
      steps: [
        {
          intro: "Hello user!"
        },
        {
          element: '.checkbox',
          intro: "This is a checkbox"
        },
        {
          element: '#inputHor1',
          intro: "This input looks very nice."
        },
        {
          element: '#anotherID',
          intro: "This is the first section"
        }
      ]});
    this.intro.setOption('showStepNumbers', false);
  }

  startIntro() {
    this.intro.start();
  }

Is there any way I can fix that?

PS: What I mean (having on my site) is something like here. So the sections on the right is where I define the steps, and when there is the need to scroll down it doesn't work. Actually the only difference is, that my scrolling bar is also inside the "right div", so I don't scroll overall page.

Answer 1

Can we see the js you're using?

Guesses:

The onscroll event works only if:

• The div has overflow: auto, overflow: scroll, overflow-y: scroll, etc.
• The div currently has a visible scrollbar that can scroll.
• The mouse movement actually causes the scrollbar to scroll.

You could also try using the onmousewheel event instead of onscroll (if that what you're using..)