时间戳

首页 > 解决方案 > ReactJS 滚动元素一定数量的像素

javascript - ReactJS 滚动元素一定数量的像素

问题描述

如何在每次单击按钮时滚动元素（不是整个页面）特定数量的像素，例如 100px（不是链接，因为每次都需要固定数量的像素）我使用 ReactJS 16。

标签： javascripthtmlreactjsscroll

解决方案

您可以scrollBy在要滚动的元素上使用。一个普通的 JS 示例：

let btn = document.getElementById('btn');
let box = document.getElementById('box');
btn.addEventListener('click', function() {
  box.scrollBy({top:100, behavior: "smooth"});
});
#box {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
}
#inner-box {
  width: 100px;
  height: 1000px;
}
.content {
  height: 50px;
  display: block
}
<button id="btn">scroll</button>
<div id="box">
  <div id="inner-box">
    <div class="content">
    content
    </div>
    <div class="content">
    content
    </div>
    <div class="content">
    content
    </div>
    <div class="content">
    content
    </div>
    <div class="content">
    content
    </div>
    <div class="content">
    content
    </div>
  </div>
</div>

这是一个 ReactJS 版本：

class Scrollable extends React.Component {
  constructor(props) {
    super(props);

    this.scroll = this.scroll.bind(this);
    this.box = React.createRef();
  }

  scroll() {
    this.box.current.scrollBy({top:100, behavior: "smooth"});
  }

  render() {
    return (
    <div>
      <button onClick={this.scroll}>scroll</button>
      <div id="box" ref={this.box}>
        <div id="inner-box">
          <div class="content">
          content
          </div>
          <div class="content">
          content
          </div>
          <div class="content">
          content
          </div>
          <div class="content">
          content
          </div>
          <div class="content">
          content
          </div>
          <div class="content">
          content
          </div>
        </div>
      </div>
    </div>
    );
  }
}

Codepen演示

推荐阅读