Элемент ReactJS Scroll с заданным количеством пикселей - PullRequest
Новая
       28

Элемент ReactJS Scroll с заданным количеством пикселей

0 голосов
/ 31 декабря 2018

Как прокрутить элемент (не всю страницу) на определенное количество пикселей, например, 100 пикселей при каждом нажатии кнопки (не имеет ссылки, поскольку каждый раз это должно быть фиксированное количество пикселей), я использую ReactJS16.

1 Ответ

0 голосов
/ 31 декабря 2018

Вы можете использовать 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

...