滚动已发行提示

编辑
问题是几乎固定...
滚动已发行提示

我发现了一个非常丑陋的方式来调整上scroll提示位置。它可以在桌面屏幕上完美工作。

但对移动问题：

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

======================原创问题

嗨，朋友们。

我正在问第5次。
（我放弃398分的回答到现在为止，所以请考虑我小心的问题）

问题是：

我想在一个固定的位置，滚动模式使用intro.js提示。
由于intro.js通过奇妙地处理所有内容，提示元素 ...
它在正常页面上正常工作。

但不是在一个模式...

我看到2个选项：

尝试使用发现introjs.js refresh()功能看.js文件。
（未在文档中发现的......这是不是反正工作）
管理从身体这些元素移动到使用“补丁脚本”的模式。

但是我不得不说我的例子非常小，按照Help Center，但是完整。

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

我已经管理过这些提示的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>

来源

2017-04-06 Louys Patrice Bessette

请全部...等待*“stacksnippets.net的服务器DNS地址无法找到。”*为固定。我的代码片段正在工作。 –

这是[** CodePen **]（http://codepen.io/Bes7weB/pen/oZRjWq） –

*«stacksnippets.net»*现在已修复... –

我不知道，如果你周围的期待这方面的工作。下面是我做的：

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

请执行accordingly.Thanks！

来源

2017-04-06 14:44:03 rawatdeepesh

你的答案给了我一些想法......并让我再次努力。所以+1。不过，还有问题。请检查我的更新。 ;） –

滚动已发行提示

回答

相关问题