0

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);
        }

        });

どんな助けでも大歓迎です。

ありがとう、セバスチャン

4

2 に答える 2

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);
        });
    }
})
于 2013-03-20T21:19:22.693 に答える
0

これを小さく試してみてください。コードに、マウスオーバータイムアウトを停止せずに自動スクロールアップとダウンをノンストップで実行するための小さな行があります。

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);
    });
  }
})
于 2015-11-20T18:04:52.490 に答える