jQuery Joyride无法在可滚动的<div>中正确滚动

Question

我有一个页面，其内容包含在可滚动的DIV元素中（使用CSS overflow: auto;）。当我整合Joyride插件来浏览DIV中的元素时，它无法正确滚动到DIV中的相应位置。而是滚动整个页面。

请参阅：https://jsfiddle.net/dkz33k3j/

我有什么遗漏或解决此问题的任何解决方法吗？

Answer 1

这是因为您为内容框提供了额外的高度，删除它将解决您的问题，

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

Demo

Answer 2

我也尝试使用EnjoyHint库，但无法找到合适的解决方案。而是作为一种解决方法，我在页面中添加了书签，然后在执行步骤之前手动滚动到书签。

$(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>