Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Horizontal Scroll Reverts to Original Scroll Position without wasting too much if your time.
The question is published on by Tutorial Guruji team.
The question is published on by Tutorial Guruji team.
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;.
We are here to answer your question about Horizontal Scroll Reverts to Original Scroll Position - If you find the proper solution, please don't forgot to share this with your team members.