在现代浏览器中，移动触摸屏滚动操作非常流畅。例如，如果你快速滑动div，它会保持滚动一小段时间，在你从屏幕上松开手指后，它会逐渐降低速度。这样，你可以更高效地到达所需的div滚动位置。
下面是我的代码片段，其中包含一个由50个子项组成的简单div：

const App = () => {

  let data = []

  for (let i = 0; i < 50; i++) {
    data.push({
      key: i,
      value: `item ${i}`
    })
  }

  const renderItem = (x) => {
    return (
      'hello' + x.key
    )
  }

  return ( <
    div className = "tileView" > {
      data.map((x, i) => {
        return ( <
          div key = {
            i
          }
          className = "item" > {
            renderItem(x)
          } <
          /div>
        );
      })
    } <
    /div>
  );
};

ReactDOM.render( < App / > , document.getElementById('root'));

.tileView {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  width: 600px;
}

.item {
  border: 1px solid gray;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  margin: 10px;
}

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

我想找到一个解决方案，使div在鼠标拖动时可以滚动，与触摸和拖动滚动的行为相匹配。
我试过实现this solution，它工作正常，但是它并不完美，因为页面滚动在鼠标释放事件时立即停止。
理想情况下，我正在寻找一个解决方案，将实现移动滚动行为的桌面。
不确定我的想法是否正确，但也许有可能向div添加一个事件，使浏览器认为div被触摸而不是被点击？
如果没有，解决这个问题的最佳方法是什么？