问题描述
我有一个关于滚动顶部的问题。 我正在为我的任务使用react js Scrollbars库。 当我向下滚动并在文本框中按Enter键时，该div应该有一个滚动顶部。
我已将以下代码用于任务。
import React from 'react' import { Scrollbars } from 'react-custom-scrollbars' class ScrollBarTask extends React.Component { handleUserInput = (e) => { if (e.key === 'Enter') { var element = document.querySelector('.parentDiv') element.scrollTop = element.scrollHeight; element.scrollTop = 0; } } render(){ return( <div> <input type="text" placeholder="Enter Value..." value={} onKeyPress={e => this.handleUserInput(e)} /> <Scrollbars style={{ height: window.innerHeight - 110), clear: "both", backgroundColor: '#EBECED' }} autoHide={true}> <div className="parentDiv"> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> </div> </Scrollbars> </div> ) } } export default ScrollBarTask
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
任何帮助都会很棒。
谢谢。
1楼
我会在您的函数中使用它：
document.getElementById('youridhere').scrollIntoView();
然后，您可以按照自己的意愿为滚动动画
2楼
import React from 'react' import { Scrollbars } from 'react-custom-scrollbars' class ScrollBarTask extends React.Component { handleUserInput = (e) => { if (e.key === 'Enter') { var element = document.getElementById('parentDivID').scrollIntoView({ block: 'start', behavior: 'smooth' }); } } render(){ return( <div> <input type="text" placeholder="Enter Value..." value={} onKeyPress={e => this.handleUserInput(e)} /> <Scrollbars style={{ height: window.innerHeight - 110), clear: "both", backgroundColor: '#EBECED' }} autoHide={true}> <div className="parentDiv" id="parentDivID"> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> <div>dummy data</div><br><br><br><br> </div> </Scrollbars> </div> ) } } export default ScrollBarTask
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
为了顺利滚动，您可以参考链接。
希望这可以帮助。