Question

我有一个以启用自动滚动开始的网站，但是给用户几秒钟禁用它或开始滚动也会禁用它。我以为我可以切换真/假，但这似乎不起作用。我不知道如何实现鼠标滚动事件。这是我的代码：

var autoplay=true;

    window.setTimeout(function(){
        if  (autoplay)
             $("html, body").animate({ scrollTop: $(document).height() }, 22000);
        },2000);

    $(document).ready(function() {
        $(".scrollToggle").click(function(){
            if(autoplay==true) {
                autoplay==false;
            } 
            else {
                autoplay==true;
            }
        });
    });

另外，有谁知道如何让这个自动滚动变得更流畅？

更新：非常感谢！这太棒了！唯一的问题是; 1）由于某种原因，它不会在页面加载时自动启动，2）当切换到关闭时，它会从顶部开始（这不是太大的问题），也是3）它似乎在滚动时获得速度下。以下是我正在运行的其他功能，可能还有一些功能可以阻止它：

$(window).load(function() { // makes sure the whole site is loaded
        $('#status').fadeOut(); // will first fade out the loading animation
        $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
        $('body').delay(350).css({'overflow':'visible'});

        setTimeout (function () {
            scrollTo(0,0);
        }, 0);

    });

    var autoplay = true,
        root = $("html, body"),
        t = 24000, //overall duration for the animation, you can set this
        n = 0,
        d = 0;

    function scrollStart() {
        n = Date.now();//get the current time in ms
        t -= d;//the current duration minus the time already traverse
        root.animate({scrollTop: $(document).height() }, t);       
        autoplay = false;
    }

    function scrollStop() {
        //on stop instance, get the time already took to travel
        d = Date.now() - n;
        root.stop(true);
        autoplay = true;
    }

    $(".scrollToggle").click(function(){
        if(autoplay) {
            scrollStart();
            $("#onOff").text("OFF");
        } else {
            scrollStop();
            $("#onOff").text("ON");
        }
    });

    $(window).scroll(function(){
        autoplay = false;
    });  

    $(window).bind('resize', function(e)
    {
      if (window.RT) clearTimeout(window.RT);
      window.RT = setTimeout(function()
      {
        this.location.reload(false); /* false to get page from cache */
      }, 100);
    });

Answer 1

您的切换结构没问题，但您的操作符不正确，应该是：

   $(".scrollToggle").click(function(){
        if(autoplay == true) {//or just if(autoplay) which is truthy
            autoplay = false;
        } 
        else {
            autoplay = true;
        }
    });

要处理鼠标滚动，只需使用scroll()事件，它就可以处理滚动条拖动和鼠标滚轮滚动：

    $(window).scroll(function(){
        autoplay = false;
    });

如果您想要暂停/恢复功能，可以使用stop()暂停，然后通过重置动画继续。

function scrollStart(){
    $("html, body").animate({ scrollTop: $(document).height() }, 22000);
}

$(".scrollToggle").click(function(){
    if(autoplay==true) {
        scrollStart();
        autoplay=false;
    } else {
        $("html, body").stop(true);
        autoplay=true;
    }
});

然而，最终当您多次切换时，您会看到下一个简历动画与其初始动画相比有些慢。我们可以将动画与速度相关联，其中它具有距离和时间，现在这个解决方案速度变化，因为它已经遍历了一段距离，但我们仍然给它相同的时间/持续时间。由于速度是一段时间的距离，为了保持动画每个简历的速度，我们还应该计算缩短的时间。

var autoplay = true,
    root = $("html, body"),
    t = 8000, //overall duration for the animation, you can set this
    n = 0,
    d = 0;

function scrollStart() {
    n = Date.now();//get the current time in ms
    t -= d;//the current duration minus the time already traverse
    root.animate({scrollTop: $(document).height() }, t);       
    autoplay = false;
}

function scrollStop() {
    //on stop instance, get the time already took to travel
    d = Date.now() - n;
    root.stop(true);
    autoplay = true;
}

$(".scrollToggle").click(function(){
    if(autoplay) {
        scrollStart();
    } else {
        scrollStop();
    }
});

更新了演示：http://jsfiddle.net/cMJZ4/1/，请查看控制台以查看时差。

Answer 2

请试试这个，

var autoplay=true;

    window.setTimeout(function(){
        if  (autoplay)
             $("html, body").animate({ scrollTop: $(document).height() }, 22000);
        },2000);

    $(document).ready(function() {
        $(".scrollToggle").click(function(){
         $('html,body').queue([]).stop();

        });
    });

Answer 3

如何不从div（无滚动）移动

<script type="text/javascript">
    function toggle(target){
        var artz = document.getElementsByClassName('eds');
        var targ = document.getElementById(target);  
        var isVis = targ.style.display=='block';
        // hide all
        for(var i=0;i<artz.length;i++){
            artz[i].style.display = 'none';
        }
        // toggle current
        targ.style.display = isVis?'none':'block';
        return false;
    }
</script>

jquery切换自动滚动按钮单击和鼠标滚动 - 更顺畅的自动滚动

3 个答案: