Question

修改
问题是几乎修复了......

我找到了一种非常难看的方法来调整scroll上的提示位置。它在桌面屏幕上完美运行。

但移动设备存在问题：

滚动事件往往会滞后（至少在我的Android三星Galaxy S3上）这可以容忍......
当焦点input时，移动键盘会混淆偏移计算这是不行的。

所以，如果有人有更好的想法来解决这个问题......

您可以使用此CodePen尝试我的几乎正常工作的解决方案
这是“几乎修复”的代码：
（我使用数组来存储lastScroll，因为我显然想要使用多个提示。）

// Position sub function
var lastScroll=[];
function fixHintPosition(container,hintNumber){

  if(typeof(lastScroll[hintNumber])=="undefined"){
    lastScroll[hintNumber]=0;
  }

  // Scrolled px
  var scroll = $(container).scrollTop();
  //console.log("Pixel scrolled: "+scroll);

  // Actual dot position
  var actualPos=parseInt($('a.introjs-hint').eq(hintNumber).css("top"));
  //console.log(actualPos);

  // New position
  var newPos=actualPos+(lastScroll[hintNumber]-scroll);
  $('a.introjs-hint').eq(hintNumber).css("top",newPos);

  // Last scroll memory
  lastScroll[hintNumber] = scroll;

  // If dot is out of the container
  var out=false;
  var containerOffset = parseInt(container.css("top"));

  if(newPos>containerOffset+container.height()){
    $('a.introjs-hint').eq(hintNumber).addClass("introjs-hidehint");
    out=true;
    console.log("Dot is below modal");
  }
  if(newPos<containerOffset){
    $('a.introjs-hint').eq(hintNumber).addClass("introjs-hidehint");
    out=true;
    console.log("Dot is above modal");
  }
  if(!out){
    $('a.introjs-hint').eq(hintNumber).removeClass("introjs-hidehint"); 
    console.log("Dot is shown");
  }
}

======================原始问题

大家好朋友。

我第五次问一些事 （到目前为止我给了398个答案，所以请小心考虑我的问题）

问题是：

我想在固定位置和可滚动模态中使用intro.js提示因为intro.js通过将提示元素添加到正文中来处理所有内容...
它在普通页面上工作正常。

但不是一个模态......

我看到两个选项：

尝试使用查找.js文件的introjs.js refresh()函数。
（在文档中找不到......而且这无论如何都不起作用）
使用“补丁脚本”管理将这些元素从正文移动到模态
但我必须说我的例子根据Help Center非常小但完整。

- 我的模态加载Ajax内容。 -
我隐藏/显示/更新提示没有问题...而且很容易（这个插件很神奇！）。
这太棒了！

我已经管理了这些«提示»的FR / EN翻译 但现在，请告诉我有一种简单的方法可以让它们只是该死的滚动目标元素！

我在intro.js documentation中找不到任何内容你能帮助我一点吗？

$(document).ready(function(){

  function addHints(){
    intro = introJs();
      intro.setOptions({
        hints: [
          {
            element: document.querySelector('#test'),
            hint: "This is not scrolling with the page",
            hintPosition: 'middle-right'
          }
        ]
      });
      
    intro.onhintsadded(function() {
        console.log('Hint loaded');
    });
    
    intro.addHints();
  }

  addHints();
  
  // This is not working... Sadly....
  $("#scrollable").on("scroll",function(){
    console.log("Scroll");
    introJs().refresh();
  });
  
});

body{
  text-align:center;
  background-color:cyan;
}
#scrollable{
  position:fixed;
  top:10%;
  left:20%;
  width:60%;
  height:200px;
  border:1px solid grey;
  border-radius:20px 0 0 20px;
  background-color:#fefefe;
  overflow-y:scroll;
}

<link href="https://www.bessetteweb.com/2017/js/intro/demo.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.5.0/introjs.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.5.0/intro.js"></script>


<body>
<div id="scrollable">
  <h1>
    Issue with the «hint»<br>
    on scroll
  </h1>
  <br>
  <input type="text" id="test"><br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
</div>
</body>

Answer 1

我不确定你是否期待这种工作。这是我做的：

HTML（与您的相同）

 <body>
  <div id="scrollable">
  <h1>
    Issue with the «hint»<br>
    on scroll
  </h1>
  <br>
 <input type="text" data-position="bottom-right-aligned" data-hintposition="top-middle" data-hint="Get it, use it."  id="test"/><br>

  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
</div>

<强> SCRIPT

$(document).ready(function() {
  function addHints() {
    intro = introJs();
    intro.onhintsadded(function() {
      console.log('Hint loaded Bolo tarara');
    });

    intro.addHints();
  }

  addHints();

  //find top of yhe scrollable according to the window size at "PAGE LOAD"
  var position = $("#test").offset();
  var containerTop;
  containerTop = $("#scrollable").offset().top;
  $("#scrollable").on("scroll", function() {
    var t, T, l;

    var window = document.getElementById('scrollable');

    //get amount of px scrolled
    var scrollLeft = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    var scroll = $(window).scrollTop() + "px";
    console.log(scroll);

    t = parseInt(position.top) - parseInt(scroll);
    T = t + "px";
    l = position.left;
    console.log("kitta hua scroll" + t);

    $("div.introjs-hints").css("position", "relative");
    //scroll your hint with the scrollbar
    document.getElementsByClassName('introjs-hint')[0].style.top = T;
    console.log("div ki offset n badri ki dulhaniya" + $("a.introjs-hint").offset().top);

    if (t < containerTop) //for aesthetics 
    {
      $("div.introjs-hints").css("display", "none");
    } else {
      $("div.introjs-hints").css("display", "block");
    }

    introJs().refresh(); //from your code
  });
});

请相应地实施。谢谢！

使用intro.js提示

1 个答案: