时间戳

首页 > 解决方案 > 如何一直向下滚动 HTML 页面并从顶部重新启动？

javascript - 如何一直向下滚动 HTML 页面并从顶部重新启动？

问题描述

我有一个 HTML 页面，它只是一个简单的 html 页面，其中包含一个大约 100 行的表格。

我想一直向下滚动我的 HTML 页面，然后一旦完成滚动，要么从顶部重新开始滚动，要么再次将滚动反转回顶部。

我在网上找到了一个例子：https ://jsfiddle.net/maherhossain/a24nymv1/ 。但是，这只适用于水平方向。我尝试垂直执行此操作并提交了下面的代码。

我没有收到任何错误。正在加载表。只是自动滚动不起作用。

我将不胜感激任何帮助。提前谢谢了。

HTML：

<div id="scroll">
    <body>
          <table class="content-table" id="demo">
          <th></th>
          <tr></tr>
          <tr></tr>
          ....
          </table>

    </body>
</div>

CSS：

#scroll { white-space: nowrap; overflow-y: scroll; }

Javascript + jQuery：

<script>

function animatethis(targetElement, speed) {
    var scrollHeight = $(targetElement).get(0).scrollHeight;
    var clientHeight = $(targetElement).get(0).clientHeight;
    $(targetElement).animate({ scrollTop: scrollHeight - clientHeight },
    {
        duration: speed,
        complete: function () {
            targetElement.animate({ scrollTop: 0 },
            {
                duration: speed,
                complete: function () {
                    animatethis(targetElement, speed);
                }
            });
        }
    });
};
animatethis($('#scroll'), 5000);

标签： javascriptjqueryhtmlcssscroll

解决方案

您好，您需要通过 css 为 targetElement 设置高度。请在下面结帐

function animatethis(targetElement, speed) {
    var scrollHeight = $(targetElement).get(0).scrollHeight;
    var clientHeight = $(targetElement).get(0).clientHeight;
    $(targetElement).animate({ scrollTop: scrollHeight - clientHeight },
    {
        duration: speed,
        complete: function () {
            targetElement.animate({ scrollTop: 0 },
            {
                duration: speed,
                complete: function () {
                    animatethis(targetElement, speed);
                }
            });
        }
    });
};
animatethis($('#scroll'), 5000);
#scroll {overflow-y: scroll; width:100%; height:200px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroll" >[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]
[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]
[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]
[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]
[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]
[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]</div>

推荐阅读