javascript - 水平滚动恢复到原始滚动位置

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;
}

代码笔 here .

Answer 1

尝试使用 width: 100%; 而不是 10000px;。