I have a simple horizontal scroll bar. Whenever I attempt to the scroll to the right and release the mouse click, the horizontal bar immediately reverts back to the original positioning. I have no idea why this is happening. I want the scroll to stick when I release the mouse click, not revert back to the original position. Code below.
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
Try using width: 100%; instead of 10000px;.