Reactjs 如何在拖动dnd时滚动页面

我已经在我的应用程序中实现了react dnd，但我不能在拖动组件时滚动到页面顶部 我怎样才能解决这个问题？提前谢谢

return (
    <div ref={connectDragSource} style={{margin:"10px",opacity:opacity}} key={item.id} >
       <Card xl={6} lg={12} md={12}>  
            <Col>
                <CardHeader>{item.name}
                <FaEdit
                  style={{
                    marginLeft: parseInt(item.width),
                }}
                onClick={this.editing}
                />
                </CardHeader>
                <CardBody>
                <Line data={genLineData(item,{ fill: false })} 
                width={parseInt(item.width)} height={parseInt(item.height)}  
                options={{
                  legend: {
                      display: false,
                  },
                  }}
                />
                </CardBody>
            </Col>
        </Card>
        <ModalEditChart  editmod={editmod} item={item}/>                 
    </div>
)

返回(
{item.name}
)

一种可能的解决方案是在顶部和底部创建不可见的组件，当源项悬停在这些组件上时，这些组件会触发滚动。

如果您的代码示例包含的不仅仅是组件，那么获得答案会更容易。你在使用图书馆吗，请提一下。此组件的行为是否受其他组件的影响，请在此处显示。