AutoScroll div内容两种方式

时间:2013-03-20 19:32:23

标签: javascript jquery

我想让div自动滚动它的内容。内容高度是可变的。这是我设法解决的问题,但是如果我将高度设置为.childElement.outerHeight或height,它只会滚动78px,我不知道为什么。

 var element = jQuery('#content');
            setInterval(scrollDown(element), 1000)

        function scrollDown(element) {
            var childElement = element.children();
            scrollAmount = childElement.outerHeight();
            element.animate({ scrollTop: 1000 }, 3000, null, scrollUp(childElement));
        }
        function scrollUp(element) {
            element.animate({ scrollTop: 0 }, 500);
        }

        });

非常感谢任何帮助。

谢谢, 塞巴斯蒂安

2 个答案:

答案 0 :(得分:0)

我找到了解决方案。

主要问题是我使用document.ready,并且div的子元素中没有所有项目,因此滚动高度不正确。我用window.load更改了它并对滚动动画进行了一些更改。此外,参数在animate函数上也是错误的。

这是最终的,正常运作的片段。

jQuery(window).load(function () {
    var element = jQuery('#content');
    var childElement = element.children();
    var scrollAmount = childElement.height();
    var speedDown = scrollAmount * 20;
    var speedUp = speedDown * 0.3;

    scrollDown(element, scrollAmount, speedUp, speedDown);

    function scrollDown(element, scrollAmount, speedUp, speedDown) {

        element.animate({ scrollTop: scrollAmount }, speedDown, function () {
            element.animate({ scrollTop: scrollAmount * -1 }, speedUp);
            scrollDown(element, scrollAmount, speedUp, speedDown);
        });
    }
})

答案 1 :(得分:0)

在小的情况下试试这个,我的代码中有一行代表自动scrollUp和Down不停不带鼠标悬停超时停止:

jQuery(window).load(function () {
  var element = jQuery('#content');
  var childElement = element.children();
  var scrollAmount = childElement.height();
  var speedDown = scrollAmount * 50;
  var speedUp = speedDown * 0.9;

  scrollDown(element, scrollAmount, speedUp, speedDown);

  function scrollDown(element, scrollAmount, speedUp, speedDown) {

    element.animate({ scrollTop: scrollAmount }, speedDown, function () {
        element.animate({ scrollTop: scrollAmount * +3 }, speedUp);
        scrollDown(element, scrollAmount, speedUp, speedDown);
        element.animate({ scrollTop: scrollAmount * -3 }, speedDown);
    });
  }
})
相关问题