javascript - intro.js 步骤和工具提示位置工作正常，但按下 "back"时除外

Question

我已经使用 steps 和 setoptions 功能设置了一个网页的介绍，它工作正常，除非用户按下返回键。

我发现的两个问题是:

1. scrolltoelement 在前进时工作正常，但在后退时工具提示会部分离开屏幕
2. 第一步选择的元素是整个页面，所以我使用“onafterchange”回调来重置工具提示顶部和右侧的偏移量。这工作正常，除了当按下后退键时它似乎被忽略(或覆盖)

JavaScript 是:

var introProfile = introJs();
introProfile.setOptions({
    tooltipPosition : 'top',
    steps: [
        {
            element: '#intro_step1',
            intro: 'Welcome to your example.com dashboard, where you can update your skills, your availability, and your professional details so that ...',
            position: 'top'
        },            {
            element: '#intro_step2',
            intro: 'Your profile contains important information which is important to complete so that...',
            position: 'bottom'
        },
        {
            element: '#intro_step3',
            intro: 'Make sure your attribute is included in your profile because the client may express a preference.',
            position: 'top'
        },
        {
            element: '#intro_step4',
            intro: 'Click here to add a photograph of yourself.',
            position: 'top'
        },
        {
            element: '#intro_step5',
            intro: 'Your photograph will appear when your profile matches a ...',
            position: 'top'
        },
        {
            element: '#intro_step6',
            intro: 'Take example.com with you, on your Android or Apple phone by clicking here.',
            position: 'top'
        }
    ]
});
introProfile.oncomplete(function() {
    ;
});
introProfile.onexit(function(){
    ;
});
introProfile.onchange(function(targetElement) {
    ; //add change bits here
});
introProfile.onafterchange(function(targetElement) {
    console.log(targetElement.id);
    switch (targetElement.id){
        case "intro_step1":
            $('.introjs-tooltip').css({top:'80px',left:'200px'});
    } 
});
introProfile.onbeforechange(function(targetElement) {
    ; // add change bits here
});

introProfile.start();

我在 HTML 中所做的就是将 intro_step1 的元素 ID 设置为 intro_step6

你可以在这里看到 fiddle :https://jsfiddle.net/brianlmerritt/3ocyuu65/10/

知道为什么“后退”功能与前进功能不同吗？

Answer 1

问题是您想通过使用 - 更改第一步工具提示的位置

$('.introjs-tooltip').css({top:'80px',left:'200px'});

这是在“onafterchange”函数中添加的 -

 introProfile.onafterchange(function(targetElement) {
    console.log(targetElement.id);
    switch (targetElement.id){
        case "intro_step1":
           $('.introjs-tooltip').css({top:'80px',left:'200px'});

    } 
    });

现在这个函数在你初始化 introjs 时如预期的那样被调用——意思是在 introjs 改变位置之后，然后被你在“onafterchange”函数中的位置覆盖

但是如果你回击这个函数是在 introjs 改变了位置之后调用的。所以为了解决这个问题，我使用了“setTimeout”

setTimeout(function(){
    $('.introjs-tooltip').css({top:'80px',left:'200px'});
},600)

现在您的位置已被工具提示覆盖

注意:如果工具提示的位置更改先完成，然后调用“onafterchange”函数，您的代码就会工作。

fiddle :https://jsfiddle.net/kushal812/3ocyuu65/11/

如果您找到更好的方法，请告诉我!!