时间戳

首页 > 解决方案 > 如何将此脚本更改为自动滚动？

javascript - 如何将此脚本更改为自动滚动？

问题描述

我有一个脚本，它有一个按钮来滚动网站，但我需要它在页面加载时自动滚动。我需要脚本完全像下面显示的那样滚动，除了按钮。谁能帮我改一下？我是javascript新手，谢谢..

function scroll(element, speed) {
    var distance = element.height();
    var duration = distance / speed;
    element.animate({scrollTop: distance}, duration, 'linear');
}

$(document).ready(function() {
    $("button").click(function() {
        scroll($("html, body"), 0.015); // Set as required
    });
});

标签： javascriptautoscroll

解决方案

你可以试试下面的 JavaScript 代码

var div = $('.autoscroller');

$('.autoscroller').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(evt) {
    if (evt.type === 'DOMMouseScroll' || evt.type === 'keyup' || evt.type === 'mousewheel') {

    }
    if (evt.originalEvent.detail < 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta > 0)) { 
        clearInterval(autoscroller);
    }
    if (evt.originalEvent.detail > 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta < 0)) { 
        clearInterval(autoscroller);
    }
});

var autoscroller = setInterval(function(){
    var pos = div.scrollTop();
    if ((div.scrollTop() + div.innerHeight()) >= div[0].scrollHeight) {
        clearInterval(autoscroller);
    }
    div.scrollTop(pos + 1);
}, 50);

在这里加载页面。文本会自动滚动到页面末尾。

推荐阅读