jQuery Joyride does not scroll properly within scrollable <DIV>

Question

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?

Answer 1

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>

Answer 2

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