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.

score 2 · Answer 1 · answered Jun 29 '16 at 20:05

2

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

answered Jun 29 '16 at 20:05

littlewolf

173
1
2
19

Actually the scrolling is included to IntroJS, so it does the scrolling automatically... (so I have no special code for scrolling, you can find it in the IntroJS Code propably..). When you look in the code (https://github.com/usablica/intro.js/blob/master/intro.js), I can only find `window.scrollBy()'.... – user5638730 Jun 30 '16 at 08:20
`window.scrollBy()` would seem to indicate that is it going by window scroll - not a containing `div`. So that's probably your problem. – littlewolf Jun 30 '16 at 14:08
And is there any easy way I can change that in sourecode of IntroJS? – user5638730 Jun 30 '16 at 14:23
hi, did you ever find a solution for this? – Dave Dec 11 '17 at 23:36

score 0 · Answer 2 · answered Jan 10 '18 at 11:06

0

Solved with #801

See the details here https://github.com/usablica/intro.js/pull/801

answered Jan 10 '18 at 11:06

Ashraful Islam

1,228
10
13

IntroJS scrolling not working

2 Answers2