我有以下 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
值改变后,根据滚动距离,滚动变得越来越快,过了一段时间,速度就变得非常快。
我应该如何修改它,以实现相同的滚动速度?
最佳答案
将线性添加到线性动画的参数中。
function startScrollDown() {
let leftSide = $('.left-side');
leftSide.stop().animate({
scrollTop: leftSide[0].scrollHeight
}, 100000, 'linear');
}
关于javascript - 如何在div内自动向下滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52798027/