Autoscroll not working ngx-joyride v2.2.9

[flippyang]

ngx-joyride works fine on my app but i am unable to scroll the page while using the tour. It does not as well autoscroll to the next step. I'm not sure where it goes wrong. I saw an issue about this on ngx-joyride previous old version but that apparently has been fixed during update version 2.2.2. Can you check on this issue. Im using angular 7 and chrome version 72.0.3626.121

[tnicola]

Hi @flippyang , Thanks for reporting. Are you using the latest version of the library (2.2.9)? Can you reproduce it in a small demo project/stackblitz? Can you please turn on the logs option of the library and send the results?

[flippyang]

Hello @tnicola. Thanks for your reply. I am unable to reproduce my codes as it may require several tweaks as it is a huge projects with use of purchased fuse theme. Also i have a fixed toolbar/headers on top and a scrollable body. And yes im using the latest version. Also the logs doesnt show any errors at the moment.

[flippyang]

Hey @tnicola, not sure if youre still looking into this issue. Ive also been busy with other tasks. So apparently the problem is caused by the conflicting css with my perfect scrollbar. I had to turn off the auto-hide scrollbar to make it work. Its still not a perfect (maybe because of my 'hide on scroll' header) but it'll do for now. Maybe you want to look into it? Also I have a list of array being called from database using ngFor, is there any way that i can target the steps to the second list? Right now its targeting the last content of the array. Thanks

[tnicola]

Hey @flippyang , Sorry about the late reply. Unfortunately it is very tough to investigate these kind of issues without a proper context. I understand that you project is very big but it would help me a lot to have a reproduction/small screenshot or any kind of thing you have on your DOM.

About the ngFor, I'm not 100% sure to have correctly understood your problem but you can find a solution here: https://github.com/tnicola/ngx-joyride/issues/33#issuecomment-457768340

Basically using the index you can target the step at the index you're interested to:

 <div joyrideStep="itemN{{i}}" *ngFor="let item of menuItems; index as i"></div>`

And then, in your typescript code you will have:

this.joyrideService.startTour(
      { 
            steps: [
                      ...
                      'itemN1', 
                       ...
                     ]
     } 
);

Let me know it this helps you.

[flippyang]

That exactly what I meant. Such a simple solution why didnt I think of that! Thank you @tnicola. About the initial problems, I understand. Will try to get the reproduction sometimes this week and get back to you.

[tnicola]

You're welcome. I'll try to reproduce your initial problem again, if you have anything you think could be helpful, please share.

[flippyang]

@tnicola Finally got around to get a small demo for your reference. This is just a small part of everything I have on my site but i can see the same current issue that i have. First off, im not sure why, but the perfect scrollbar is working just fine in the demo but not mine, but its fine because i have fixed the problem. Now another problem is whenever it has to scroll, the target went to the very top of the page and gets hidden by the header.

Heres the demo: https://stackblitz.com/edit/angular-olwjss

[tnicola]

Thank you, this is very helpful, I'll try it and I'll let you know.

[tnicola]

@flippyang I released a new version with the fix (2.2.10): https://stackblitz.com/edit/angular-1mpoxd . Unfortunately you should disable the perfect-scrollbar to get it working. In the next days I cannot work so much on the lib but I'll do the best to find a better solution.

[flippyang]

Hey @tnicola thank you for the fix. It seems like the issue is fixed on the new version but only for the small target. On large/long target item, there is still a scroll issue. I have updated my stackblitz with image for you to check here: https://stackblitz.com/edit/angular-6wrfe3

[tretrue]

Are there any advancements with this issue? I basically have an element that when zoomed on the page at the normal 100%, when the steps go to an element that is not in view of the webpage, the page does NOT autoscroll to the next step, resulting in a standstill to the tour and making it basically unusable.

[kishorekumarvajravel]

Hi All,

Kindly use this for reference,

` /**

    @method scroll
    @param id
    */
    scroll(id) {
    const blue = document.getElementById(id);
    let position = blue.getBoundingClientRect();
    window.scrollTo(position.left, position.top + window.scrollY - 150);
    }

    `

And use the function in the inside the step function this.joyrideService.startTour( { steps: this.filterTourSteps, showCounter: false, stepDefaultPosition: 'bottom', themeColor: this.themeColor, showPrevButton: true, logsEnabled: false, waitingTime: 600 } ).subscribe( step => { this.scroll(step.name) }, e => { }, () => { this.doneTour(); } ); } catch (err) { } } });

It will be scrolled to the positions on the target container.

Thanks.

[ifourJayBrahmbhatt]

Hey, where did you exactly put this function in? I am stuck on this issue for a week now. Also the scroll automatically scrolls to either top and bottom for no reason for me