编辑
该问题几乎已经解决...
我发现了一种相当丑陋的方法来调整滚动上的提示位置。它在桌面屏幕上完美运行。
但移动设备上存在问题:
- 滚动事件往往会滞后(至少在我的 Android Samsung Galaxy S3 上)。
这还可以忍受... - 当
输入获得焦点时，移动键盘会扰乱偏移计算。
这是不行的。
所以如果有人有更好的主意来解决这个问题......
您可以使用此 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 通过添加提示元素到正文来出色地处理所有事情...
它在普通页面上运行良好。
但不是模态......
我看到 2 个选项:
尝试使用在 .js 文件中找到的 introjs.js
refresh()函数。
(在文档中找不到......而且这无论如何都不起作用)设法使用“补丁脚本”将这些元素从正文移动到模式。
但是我不得不说，根据Help Center，我的示例非常小。但完整。
-- 我的模式加载 Ajax 内容。 --
我隐藏/显示/更新提示没有问题......而且非常容易(这个插件很神奇!)。
这太棒了!!
我已经管理了论文《提示》的法语/英语翻译。
但是现在，请告诉我有一种简单的方法可以让它们该死的随着目标元素滚动!
我在 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>最佳答案
我不确定您是否期待这种解决方法。这是我所做的:
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
});
});
请相应执行。谢谢!
关于javascript - 使用 intro.js 提示修复 div(模态)中的滚动问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43245732/