2

I have a page which has content wrapped within a scrollable DIV element (using CSS overflow: auto;). When I integrate Joyride plugin to tour the elements within the DIV it does not correctly scroll to the respective position in the DIV. Instead it scrolls the entire page.

Please refer: https://jsfiddle.net/dkz33k3j/

Is there anything I have missed or any workaround to solve this issue?

Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
Lasantha Samarakoon
  • 91
  • 6

2 Answers2

0

It is because you have given extra height for your content box remove it will solve your issue,

.content-box {
    border: 1px dashed #888;
    /*height: 400px;*/
    padding: 10px;
    overflow: auto;
}

Demo

Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
  • Thanks for the response Rohan. But in my original case I have the window splitted into 2 columns. The left pane (a DIV) has a form and its height is set to the window height (so the scrolls appears). The right pane (again a DIV) has a map which should be visible always. So I am afraid that removing DIV height won't be an option for me :( – Lasantha Samarakoon Aug 26 '16 at 06:38
0

I tried the same with EnjoyHint library as well, but couldn't find out a proper solution. Instead as a workaround I have added bookmarks within the page and then manually scroll to the bookmark before executing the step.

$(document).ready(function() {
    $('#joyRideTipContent').joyride({
        autoStart: true,
         modal: true,
        expose: true,
        preStepCallback: function(index, tip) {
            if (index === 4) {
                location.hash = 'anchor-name';
            }
        }
        postStepCallback: function(index, tip) {},
    });
});

<a name="anchor-name"></a>
Lasantha Samarakoon
  • 91
  • 6