Question

我有以下html，将页面分为左侧和右侧。左侧应自动向下滚动，而右侧不移动。我已经实现了这一点，并且自动滚动也起作用了，而只有一侧。但是现在我的JavaScript无法正常工作，而且我不知道如何修改它，只能选择页面的左侧。

HTML：

<div class="container-fluid">
    <div class="row wrapper">
        <div class="col-8 left-side">
            <p class="dream-id">asd</p>
            <p class="dream-body">asd</p>
        </div>
        <div class="col-4 right-side">
            <button class="about-button">?</button>
            <button class="add-button">+</button>
        </div>
    </div>
</div>

CSS：

.left-side {
  height: 100%;
  overflow: auto;
}

.right-side {
  height: 100vh;
  width: 100vh;
  background-color: red;
  position: relative;
  overflow: hidden;
}

.wrapper {
  display: flex;
  overflow: hidden;
  height: 100vh;
  margin-top: -100px;
  padding-top: 100px;
  position: relative;
  width: 100%;
  backface-visibility: hidden;
  will-change: overflow;
}

.left-side,
.right-side {
  overflow: auto;
  height: auto;
  padding: .5rem;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
}

.left-side::-webkit-scrollbar,
.right-side::-webkit-scrollbar {
  display: none;
}

jQuery：

$(document).ready( function() {
    startScrollDown();
});

$(window).on('beforeunload', function(){
    goToTop();
});

function startScrollDown() {
    scroll = setInterval(function(){ window.scrollBy(0, 1); }, 15);
}

function goToTop() {
    $(document).scrollTop(0);
}

由于window.scrollBy()现在不适合这样做，所以我不知道该如何处理。

编辑：

所以我找到了解决方案，但是这些解决方案似乎起步缓慢，然后加快了速度。但是我需要相同的速度，因为人们应该能够阅读文本：

function startScrollDown() {

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

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

如何使用类名在页面的一侧设置自动滚动？

0 个答案: