时间戳

首页 > 解决方案 > 如何在div内自动向下滚动？

javascript - 如何在div内自动向下滚动？

问题描述

我有以下 HTML：

<div class="container-fluid">
    <div class="row wrapper">
        <div class="col-8 left-side">
            @if(count($dreams) > 0)
                @foreach($dreams as $dream)
                    <p class="dream-body">{{$dream->dream}}</p>
                @endforeach
            @endif
        </div>
        <div class="col-4 right-side">
            <div class="d-flex justify-content-between">
                <span></span>
                <a href="/about" class="about-button">?</a>
                <a href="/upload" class="add-button">+</a>
            </div>
            <p class="blue-text float-right position-absolute rotate position-vertical-text">asd</p>
            <p class="position-absolute position-percentage blue-text">23%</p>
        </div>
    </div>
</div>

该站点从左右两侧站立。右侧是静止的，根本不动。但是在左侧，我插入了很多文本。左侧应自行向上移动，无需用户滚动，因此用户可以阅读那里的文本。

我有以下 javascript 来实现这一点：

function startScrollDown() {

    let leftSide = $('.left-side');

    leftSide.stop().animate({
        scrollTop: leftSide[0].scrollHeight
    }, 100000);
}

这样做的问题是它开始很慢，但是在scrollTop和scrollHeight值改变之后，根据滚动距离，滚动变得越来越快，在一个点之后它就超级快了。

我应该如何修改它，以实现相同的速度滚动？

标签： javascriptjqueryhtml

解决方案

将线性添加到线性动画的参数。

function startScrollDown() {

  let leftSide = $('.left-side');

  leftSide.stop().animate({
      scrollTop: leftSide[0].scrollHeight
  }, 100000, 'linear');
}

推荐阅读