Fatal编程技术网
  • javascript/
  • Javascript 使用intro.js提示在fixed div（模式）中滚动问题

Javascript 使用intro.js提示在fixed div（模式）中滚动问题

javascript jquery

Javascript 使用intro.js提示在fixed div（模式）中滚动问题,javascript,jquery,intro.js,Javascript,Jquery,Intro.js,编辑 这个问题几乎解决了… 我发现了一种非常难看的方法来调整滚动条上的提示位置。它可以在桌面屏幕上完美工作。 但在手机上也存在一些问题： 滚动事件往往会延迟（至少在我的Android三星Galaxy S3上是如此）。 这是可以容忍的 聚焦输入时，移动键盘会干扰偏移计算。 这是不行的 因此，如果有人有更好的办法来解决这个问题…… 你可以用这个试试我的几乎有效的解决方案。 以下是“几乎修复”代码： （我使用数组来存储lastScroll，因为我显然想使用多个提示。） 正文{ 文本对齐：居中； 背景

编辑
这个问题几乎解决了…

我发现了一种非常难看的方法来调整
滚动条上的提示位置。它可以在桌面屏幕上完美工作。

但在手机上也存在一些问题：


  • 滚动事件往往会延迟（至少在我的Android三星Galaxy S3上是如此）。
    
这是可以容忍的
    • 

  • 聚焦
    输入时，移动键盘会干扰偏移计算。
    
这是不行的
    • 
因此，如果有人有更好的办法来解决这个问题……
    
你可以用这个试试我的几乎有效的解决方案。
    

    
以下是“几乎修复”代码：
    
（我使用数组来存储
    lastScroll
    ，因为我显然想使用多个提示。）
    

    正文{
文本对齐：居中；
背景色：青色；
}
#可滚动{
位置：固定；
排名前10%；
左：20%；
宽度：60%；
高度：200px；
边框：1px纯灰；
边界半径：20px 0 0 20px；
背景色：#fefe；
溢出y：滚动；
}
    

    
发出«提示»
    
滚动

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    我不确定您是否期待这种解决方法。以下是我所做的：
    
HTML（与您的相同）
    

    
发出«提示»
    
滚动

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
脚本
    

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

    

    $（文档）.ready（函数（）{
函数addHints（）{
intro=introJs（）；
intro.onhintsadded（函数（）{
log（'Hint-loaded-Bolo-tarara'）；
});
intro.addHints（）；
}
添加提示（）；
//根据“页面加载”窗口大小查找可滚动页面的顶部
变量位置=$（“#测试”）.offset（）；
var containerTop；
containerTop=$（“#可滚动”）.offset（）.top；
$（“#可滚动”）。在（“滚动”，函数（）上{
变量t，t，l；
var window=document.getElementById（'scrollable'）；
//获取已滚动的px数量
var scrollLeft=（window.pageXOffset！==未定义）？window.pageXOffset:（document.documentElement | | | document.body.parentNode | | document.body）。scrollLeft；
变量scrollTop=（window.pageYOffset！==未定义）？window.pageYOffset:（document.documentElement | | | document.body.parentNode | | document.body）.scrollTop；
var scroll=$（窗口）.scrollTop（）+“px”；
console.log（滚动）；
t=parseInt（position.top）-parseInt（scroll）；
T=T+“px”；
l=位置。左；
console.log（“kitta hua scroll”+t）；
$（“div.introjs-hints”）.css（“位置”、“相对”）；
//使用滚动条滚动提示
document.getElementsByClassName（'introjs-hint'）[0].style.top=T；
log（“div ki offset n badri ki dulhaniya”+$（“a.introjs-hint”）.offset（）.top）；
如果（t
    

    请按此执行，谢谢
     请大家。。。请稍候，«stacksnippets.net的服务器DNS地址找不到。»已修复。我的代码片段正在运行。这里有一个«stacksnippets.net»现在已经修复了…我刚刚在你的答案中添加了一个问题给了我一些想法。。。让我再次努力。所以+1。尽管如此，仍然存在一些问题。请检查我的更新。；）谢谢你的意见。它在我的桌面上运行得很好，我会在手机上检查。

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