使用 intro.js 提示在固定 div（模态）中滚动问题答案

【问题标题】：Scroll issue in fixed div (modal) using intro.js hints使用 intro.js 提示在固定 div（模态）中滚动问题
【发布时间】：2017-04-06 04:28:27
【问题描述】：

编辑
该问题几乎已修复...

我发现了一种非常丑陋的方法来调整scroll 上的提示位置。它可以在桌面屏幕上完美运行。

但在移动端存在问题：

滚动事件往往滞后（至少在我的 Android Samsung 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");
  }
}

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

朋友们好。

我是第 5 次问问题。
（到目前为止，我给出了 398 个答案，所以请仔细考虑我的问题）

问题是：

我想在固定位置和可滚动模式中使用intro.js 提示。
由于 intro.js 通过将提示元素添加到正文中出色地处理了所有内容...
它在普通页面上运行良好。

但不是在模态中...

我看到 2 个选项：

尝试使用查看 .js 文件时发现的 introjs.js refresh() 函数。
（在文档中未找到...这无论如何都不起作用）
使用“补丁脚本”设法将这些元素从正文移动到模态。

但是我不得不说，按照@，我的示例非常少987654323@ 但完整。

-- 我的模态加载 Ajax 内容。 --
我正在毫无问题地隐藏/显示/更新提示......而且非常容易（这个插件很神奇！）。
这工作太棒了！

我已经管理了这些 «hints» 的 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>

【问题讨论】：

请大家...等一下，«stacksn-ps.net 的服务器 DNS 地址无法找到。» 已修复。我的 sn-p 工作正常。
这是CodePen
«stacksn-ps.net» 现已修复...
我刚刚在GitHub添加了一个问题

标签： javascript jquery intro.js

【解决方案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>

脚本

$(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
  });
});

请相应执行。谢谢！

【讨论】：

你的回答给了我灵感……让我再次努力。所以+1。尽管如此，仍然存在一些问题。请检查我的更新。 ;)
感谢您的意见。它在我的桌面上完美运行，我将在移动设备上进行检查。