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