jQuery Joyride 在可滚动范围内无法正确滚动 <DIV>
jQuery Joyride does not scroll properly within scrollable <DIV>
我有一个页面,其内容包含在可滚动的 DIV 元素中(使用 CSS overflow: auto;
)。当我集成 Joyride 插件来浏览 DIV 中的元素时,它没有正确滚动到 DIV 中的相应位置。相反,它会滚动整个页面。
请参考:https://jsfiddle.net/dkz33k3j/
有什么我遗漏的或解决这个问题的方法吗?
这是因为您为您的内容框提供了额外的高度,删除它会解决您的问题,
.content-box {
border: 1px dashed #888;
/*height: 400px;*/
padding: 10px;
overflow: auto;
}
我也对 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>
我有一个页面,其内容包含在可滚动的 DIV 元素中(使用 CSS overflow: auto;
)。当我集成 Joyride 插件来浏览 DIV 中的元素时,它没有正确滚动到 DIV 中的相应位置。相反,它会滚动整个页面。
请参考:https://jsfiddle.net/dkz33k3j/
有什么我遗漏的或解决这个问题的方法吗?
这是因为您为您的内容框提供了额外的高度,删除它会解决您的问题,
.content-box {
border: 1px dashed #888;
/*height: 400px;*/
padding: 10px;
overflow: auto;
}
我也对 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>