时间戳

首页 > 解决方案 > Javascript：按下回车键时滚动到div的顶部

javascript - Javascript：按下回车键时滚动到div的顶部

问题描述

我有一个关于滚动条的问题。我正在为我的任务使用 react js Scrollbars 库。当我向下滚动并在文本框中按回车键时，该 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>

任何帮助都会很棒。

谢谢你。

标签： javascriptreactjsscrollbar

解决方案

我会在你的函数中使用它：

document.getElementById('youridhere').scrollIntoView();

然后，您可以根据自己的意愿为滚动设置动画

推荐阅读