javascript state - 如何滾動div以在ReactJS中可見?





jsx create (6)


我只是為在React中搜索Scroll-To功能的其他人添加了一些信息。 我已經為我的應用程序綁了幾個庫來做Scroll-To,並且在我找到react-scrollchor之前,沒有一個工作從我的用例開始,所以我想我會傳遞它。 https://github.com/bySabi/react-scrollchor

我有一個彈出列表,它是一個div ,包含一個子div的垂直列表。 我添加了向上/向下鍵盤導航以更改當前突出顯示的子項。

現在,如果我按下向下鍵足夠多次,突出顯示的項目將不再可見。 如果滾動視圖,則向上鍵也會出現同樣的情況。

React自動滾動子div到視圖的正確方法是什麼?




另一個在ref而不是string中使用函數的例子

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items:[], index: 0 };
    this._nodes = new Map();

    this.handleAdd = this.handleAdd.bind(this);
    this.handleRemove = this.handleRemove.bind(this);
   }

  handleAdd() {
    let startNumber = 0;
    if (this.state.items.length) {
      startNumber = this.state.items[this.state.items.length - 1];
    }

    let newItems = this.state.items.splice(0);
    for (let i = startNumber; i < startNumber + 100; i++) {
      newItems.push(i);
    }

    this.setState({ items: newItems });
  }

  handleRemove() {
    this.setState({ items: this.state.items.slice(1) });
  }

  handleShow(i) {
    this.setState({index: i});
    const node = this._nodes.get(i);
    console.log(this._nodes);
    if (node) {
      ReactDOM.findDOMNode(node).scrollIntoView({block: 'end', behavior: 'smooth'});
    }
  }

  render() {
    return(
      <div>
        <ul>{this.state.items.map((item, i) => (<Item key={i} ref={(element) => this._nodes.set(i, element)}>{item}</Item>))}</ul>
        <button onClick={this.handleShow.bind(this, 0)}>0</button>
        <button onClick={this.handleShow.bind(this, 50)}>50</button>
        <button onClick={this.handleShow.bind(this, 99)}>99</button>
        <button onClick={this.handleAdd}>Add</button>
        <button onClick={this.handleRemove}>Remove</button>
        {this.state.index}
      </div>
    );
  }
}

class Item extends React.Component
{
  render() {
    return (<li ref={ element => this.listItem = element }>
      {this.props.children}
    </li>);
  }
}

演示: https://codepen.io/anon/pen/XpqJVehttps://codepen.io/anon/pen/XpqJVe




為了建立@Michelle Tilley的答案,我有時想要在用戶的選擇發生變化時滾動,所以我在componentDidUpdate上觸發滾動。 我還做了一些數學計算,以確定滾動的距離以及是否需要滾動,這對我來說如下所示:

  componentDidUpdate() {
    let panel, node;
    if (this.refs.selectedSection && this.refs.selectedItem) {
      // This is the container you want to scroll.          
      panel = this.refs.listPanel;
      // This is the element you want to make visible w/i the container
      // Note: You can nest refs here if you want an item w/i the selected item          
      node = ReactDOM.findDOMNode(this.refs.selectedItem);
    }

    if (panel && node &&
      (node.offsetTop > panel.scrollTop + panel.offsetHeight || node.offsetTop < panel.scrollTop)) {
      panel.scrollTop = node.offsetTop - panel.offsetTop;
    }
  }




在你的keyup / down處理程序中,你只需要設置你想要滾動的div的scrollTop屬性,使其向下(或向上)。

例如:

JSX:

<div ref="foo">{content}</div>

keyup / down處理程序:

this.refs.foo.getDOMNode().scrollTop += 10

如果你做了類似於上面的事情,你的div將向下滾動10個像素(假設div設置為auto溢出或scroll css,當然你的內容溢出)。

您需要對此進行擴展,以找到要將div向下滾動到滾動div內的元素的偏移量,然後修改scrollTop以滾動足夠遠以顯示基於其高度的元素。

看看MDN對scrollTop和offsetTop的定義:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop




萬一有人偶然發現,我是這樣做的

  componentDidMount(){
    const node = this.refs.trackerRef;
    node && node.scrollIntoView({block: "end", behavior: 'smooth'})
  }
  componentDidUpdate() {
    const node = this.refs.trackerRef;
    node && node.scrollIntoView({block: "end", behavior: 'smooth'})
  }

  render() {
    return (

      <div>
        {messages.map((msg, index) => {
          return (
            <Message key={index} msgObj={msg}
              {/*<p>some test text</p>*/}
            </Message>
          )
        })}

        <div style={{height: '30px'}} id='#tracker' ref="trackerRef"></div>
      </div>
    )
  }

scrollIntoView是本機DOM功能link

它將始終顯示tracker div




這適用於jQuery:

$(window).attr("location", "http://google.fr");






javascript html css scroll reactjs