jQuery Joyride 不能在可滚动 <DIV> 内正确滚动

Posted 2023-05-09

【中文标题】jQuery Joyride 不能在可滚动 <DIV> 内正确滚动

【英文标题】：jQuery Joyride does not scroll properly within scrollable <DIV>

【发布时间】：2017-01-02 16:06:57

【问题描述】：

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

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

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

【参考方案1】：

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

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

Demo

【讨论】：

感谢罗汉的回复。但在我原来的情况下，我将窗口分成 2 列。左窗格（DIV）有一个窗体，其高度设置为窗口高度（因此出现滚动）。右窗格（同样是一个 DIV）有一个应该始终可见的地图。所以我担心删除 DIV 高度对我来说不是一个选择:(

【参考方案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>