在组件重新渲染时重置滚动位置

Question

看看这支笔： https : //codepen.io/segmentationfaulter/pen/XzgJyV

为方便起见，我也在此处粘贴代码。 打开上面的笔后，您将看到呈现了一个滑块。 向右滚动滑块，然后单击change slides按钮，您会看到滑块以不同的数字重新呈现，但滑块的滚动位置并未重置。 为什么滚动位置没有重置？ 谢谢

 function SliderElement({ elementContent }) { return ( < div className = 'slider-element' > { elementContent } < /div> ) } class Slider extends React.Component { render() { return ( < div className = 'slider' > { this.props.sliderContentArray.map(elementContent => < SliderElement elementContent = { elementContent } />)} < /div> ) } } class SliderContainer extends React.Component { constructor() { super() this.slidersContent = [ [1, 2, 3, 4, 5, 6, 7, 8], [9, 10, 11, 12, 13, 14, 15, 16] ] this.state = { currentSliderIndex: 0 } } switchSlider() { this.setState((prevState) => { if (prevState.currentSliderIndex === 0) { return { currentSliderIndex: 1 } } else { return { currentSliderIndex: 0 } } }) } render() { return ( < div > < Slider sliderContentArray = { this.slidersContent[this.state.currentSliderIndex] } /> < button className = 'slider-switch-button' onClick = { this.switchSlider.bind(this) } > change slides < /button> < /div> ) } } ReactDOM.render( < SliderContainer / > , document.getElementById('root') );

 .slider { display: flex; overflow: scroll; } .slider-element { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 20%; height: 100px; background: yellow; } .slider-element+.slider-element { margin-left: 10px; } .slider-switch-button { margin-top: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>

Answer 1

每次更新组件时，您都需要使用scrollLeft属性手动更新滚动位置。 您可以在Slider组件的componentDidUpdate中执行此操作：

  componentDidUpdate() {
    ReactDOM.findDOMNode(this).scrollLeft = 0;
  }

在这里找到工作笔： https : //codepen.io/danegit/pen/xPrayY?editors=0010

Answer 2

您的滑块内容重新呈现，但滚动条不知道它。 您需要手动将具有overflow: scroll的div的scrollLeft位置更改为0 overflow: scroll属性，在您的情况下是div with slider className的div with slider className 。

您可以将引用附加到它并设置scrollLeft = 0就像

class Slider extends React.Component {
  render () {
    return (
      <div ref={this.props.innerRef} className='slider'>
        {this.props.sliderContentArray.map(elementContent => <SliderElement elementContent={elementContent} />)}
      </div>
    )
  }
}

class SliderContainer extends React.Component {
  constructor () {
    super()
    this.slidersContent = [
      [1, 2, 3, 4, 5, 6, 7, 8],
      [9, 10, 11, 12, 13, 14, 15, 16]
    ]

    this.state = {
      currentSliderIndex: 0
    }
  }
  switchSlider () {
    this.setState((prevState) => {
      if (prevState.currentSliderIndex === 0) {
        return { currentSliderIndex: 1 }
      } else {
        return { currentSliderIndex: 0 }
      }
    }, () => {this.slider.scrollLeft = 0})
  }
  render () {
    return (
      <div>
        <Slider innerRef={(ref) => this.slider = ref} sliderContentArray={this.slidersContent[this.state.currentSliderIndex]} />
        <button
          className='slider-switch-button'
          onClick={this.switchSlider.bind(this)}
        >
          change slides
        </button>
      </div>
    )
  }
}

代码笔

Answer 3

您可以针对该问题使用通用解决方案

export const history = createHistory()

history.listen((location, action) => {
    window.scrollTo(0, 0)
})

使用此侦听器，您可以“观察”路线中的每一个变化

来源： https : //medium.com/@nasir/reset-scroll-position-on-change-of-routes-react-a0bd23093dfe#