类似移动设备的桌面滚动答案

【问题标题】：Mobile-like scrolling for desktops类似移动设备的桌面滚动
【发布时间】：2023-01-23 21:40:21
【问题描述】：

移动触摸屏滚动在现代浏览器中开箱即用，非常流畅。例如，如果您在 div 上快速滑动，它会继续滚动一会儿，在您从屏幕上松开手指后逐渐降低速度。这样，您可以更有效地到达所需的 div 滚动位置。

这是我的 sn-p，带有一个包含 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 被触摸而不是被点击？

如果没有，解决这个问题的最佳方法是什么？

【问题讨论】：

标签： javascript html css scroll smooth-scrolling

【解决方案1】：

我认为您正在寻找的是基于动量的拖动滚动。您可以在 question 的答案中提供的代码笔中看到一个很好的例子。希望这有帮助 :)

【讨论】：