Javascript intro.js步骤和工具提示位置可以正常工作，除非；“后退”；受压

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

我发现的两个问题是：

scrolltoelement向前运行正常，但向后运行时工具提示部分脱离屏幕

第一步中选择的元素是整个页面，因此我使用“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

你可以在这里看到小提琴：

---

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

问题是您想使用-

$('.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”

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

注意：如果首先完成了工具提示的点更改，然后调用了“onafterchange”函数，那么代码就可以工作了

小提琴：

---

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

使用后退按钮时，IntroJS显示了一些错误。以下是使用Ionic和Typescript框架的解决方案：

export class HomePage {

 introApp = introJs.introJs(); //Declared the IntroJS

 ...

 this.intro(); // Call the method

 ...

 intro() {  this.introApp.setOptions({...})} //Set the options in IntroJS

 //Bug Correction

 this.introApp.onafterchange(function(targetElement) {
  console.log(targetElement.id);
  switch (targetElement.id){
      case "b1":
          setTimeout(function(){
            var element = document.getElementsByClassName('introjs-tooltip');
            var boxArrow = document.getElementsByClassName('introjs-arrow top');
            var numberLayer = document.getElementsByClassName('introjs-helperNumberLayer');
            element.item(0).setAttribute("style", "top:210px;");
            boxArrow.item(0).setAttribute("style", "display: block");
            numberLayer.item(0).setAttribute("style", "left: 0; top:0;");
          },600)
       } 
  });

---

谢谢你，库沙尔。我已投票赞成你的建议。理想情况下，我更喜欢回调，而不是计时器，但同时你的建议有效：）酷！！如果你找到更好的解决方案，请告诉我

export class HomePage {

 introApp = introJs.introJs(); //Declared the IntroJS

 ...

 this.intro(); // Call the method

 ...

 intro() {  this.introApp.setOptions({...})} //Set the options in IntroJS

 //Bug Correction

 this.introApp.onafterchange(function(targetElement) {
  console.log(targetElement.id);
  switch (targetElement.id){
      case "b1":
          setTimeout(function(){
            var element = document.getElementsByClassName('introjs-tooltip');
            var boxArrow = document.getElementsByClassName('introjs-arrow top');
            var numberLayer = document.getElementsByClassName('introjs-helperNumberLayer');
            element.item(0).setAttribute("style", "top:210px;");
            boxArrow.item(0).setAttribute("style", "display: block");
            numberLayer.item(0).setAttribute("style", "left: 0; top:0;");
          },600)
       } 
  });