Question

我在我的网站上使用IntroJS。人们可以通过点击我的按钮开始游览，但我希望它在访问者向下滚动时自动启动。我为此制作了这个功能，但它一直开始巡演，从而翻转整个网页：

window.onscroll = function() {tourstart()};

function tourstart() {
    if (document.body.scrollTop > 50) {
        introJs().start();
}
}

我怎样才能让它运行一次？

提前谢谢！

Answer 1

开始游览时删除处理程序：

function tourstart() {
    if (document.body.scrollTop > 50) {
        window.onscroll = null;
        introJs().start();
    }
}

Answer 2

你写了标签jQuery，所以如果你使用它，你可以写：

$(window).one('scroll', function() {
  tourstart();
});

Answer 3

如果您想在页面加载后运行一次，请尝试以下操作：

var onlyOnce = true;
window.onscroll = function() {tourstart()};

function tourstart() {
    if (document.body.scrollTop > 50 && onlyOnce) {
        onlyOnce = false;
        introJs().start();
    }
}

但是如果你想为用户（/浏览器）运行一次，你可以使用cookies，here an other stackoverflow solution for use the cookies但是在这里复制/粘贴这些功能：

代码以这种方式改变：

var onlyOnce = readCookie("once");
window.onscroll = function() {tourstart()};

function tourstart() {
    if (document.body.scrollTop > 50 && onlyOnce!="true") {
        createCookie("once", "true", 10); // It expires in 10 days for example
        introJs().start();
    }
}

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

滚动时运行脚本，但只运行一次

3 个答案: