Scroll Problem in fester div (modal) mit intro.js Hinweisen

Question

EDIT
Das Problem ist fast festen ...

ich ziemlich hässlich Weg gefunden, die Andeutung Position auf scroll einzustellen. Es funktioniert perfekt auf einem Desktop-Bildschirm.

Aber es gibt Probleme auf Handy:

1. Das Scroll-Ereignis neigt (zumindest auf meinem Android Samsung Galaxy S3) hinken.
   Dies könnte tolerierbar sein ...
2. Wenn ein input fokussiert ist, vermasselt das mobile Tastenfeld die Offset-Berechnung.
   Das ist no-go.

Also, wenn jemand eine bessere Idee hat, dieses Problem zu beheben ...

Sie können meine fast arbeiten Lösung mit diesen CodePen versuchen.

Hier ist die "fast fix" Code:
(. Ich ein Array verwenden lastScroll zu speichern, weil ich mehr als einen Hinweis offensichtlich verwenden möchten)

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

Ursprüngliche Frage

---

Hallo SO Freunde.

Ich frage etwas zum 5. Mal.
(habe ich 398 Antworten bis jetzt, so wenden Sie sich bitte meine Frage sorgfältig prüfen)

Ausgabe ist:

I intro.js Hinweise in einer festen Position und scrollbaren modal verwenden möchten.
Da intro.js wunderbar durch alles behandelt, indem die Hinweiselemente dem Körper hinzugefügt werden ...
Es funktioniert gut auf einer normalen Seite.

Aber nicht in einem modalen ...


Ich sehe 2 Möglichkeiten:

1. Versuchen Sie, die introjs.js refresh() Funktion bei der JS-Datei suchen gefunden zu verwenden.
   (nicht in der Dokumentation gefunden ... Und das nicht funktioniert sowieso)

2. diese Elemente von Körper zu dem modalen zu bewegen verwalten, um einen „Patch-Skript“ verwenden.
   
   ABER Ich muss sagen, dass mein Beispiel ziemlich minimal ist, wie per Help Center aber komplett.
   
     - Mein Modal lädt Ajax Inhalt. -
   Ich hide/zeige/aktualisiere die Hinweise ohne Problem ... Und sehr leicht (dieses Plugin ist magisch!).
   Das funktioniert soooo super !!
   
   Ich verwalte bereits die FR/EN Übersetzung dieser Thesen «Hints».
   ABER jetzt, bitte sagen Sie mir, es gibt einen einfachen Weg, um sie nur verdammt mit dem Zielelement scrollen!
   
   
   Ich habe nichts in der intro.js documentation gefunden.
   Können Sie mir ein wenig helfen?

$(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

Ich bin nicht sicher, ob Sie diese Art von Arbeit um erwarten. Hier ist, was ich getan habe:

HTML (gleiche wie Sie)

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

Bitte implementieren accordingly.Thanks!