水平滚动恢复为原始滚动位置

Question

我有一个简单的水平滚动条。每当我尝试向右滚动并释放鼠标时，水平条会立即恢复到原始位置。我不知道为什么会这样。当我释放鼠标单击时，我希望滚动贴，而不是恢复到原始位置。代码如下。

HTML

<ion-scroll direction="x" class=" wide-item">
      look at dog    <img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" width="70" height="70">
      look at dog    <img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" width="70" height="70">
      look at dog    <img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" width="70" height="70">
      look at dog    <img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" width="70" height="70">
      look at dog    <img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" width="70" height="70">
      look at dog    <img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" width="70" height="70">
      look at dog    <img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" width="70" height="70">
      look at dog    <img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" width="70" height="70">
</ion-scroll>

CSS

.wide-item {
  width: 1000%;
  overflow-x: scroll; 
  -webkit-overflow-scrolling:touch; 
  display: inlnine;
}

img {
  display: inline;
}

Codepen here。

Answer 1

尝试使用width: 100%;代替10000px;。