CODEWITHSUNDEEP
htmlionic-frameworkionic3ion-scroll
Dineshkumar
Dineshkumar

Reputation: 1

Click and sliding effect is not working in ion-scroll container using ionic 3.9.2 version

I am new to IONIC world. Currently I'm migrating a web application from ioinc1.7.16+angularjs+javascript to latest versions i.e., ionic 3.10.0+angular5+typescript. I am using windows 8.1 OS. I am using Node v8.9.1, npm v5.5.1, ionic 3.20.0, cordova 8.0.0.

In my existing application ion-scroll works fine. I mean horizontal scroll bar is not visible but able to click and drag or slide left/right a container smoothly using my mouse. My scroll container simply contains a list of images only.

Issue: But this same horizontal scroll click and drag or slide left/right is not working in my migrated web application which uses ionic 3.20.0

I'm breaking my head to make it work since last week but no luck. Can anyone please help me to fix this issue?

Here is my migrated code:

HTML

<ion-content>
  <ion-scroll scrollX="true">
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
      <div class="inline"><img src="https://placehold.it/400x400" /></div>
  </ion-scroll>
</ion-content>

SCSS

page-home { 
     .inline{
         display: inline-block;
     }

     ion-scroll{
         white-space: nowrap; 
         height: 400px;
         width: 600px;
     } 
}

Upvotes: 0

Views: 979

Answers (1)

shadowfs
shadowfs

Reputation: 33

your code looks fine. sliding on click and drag wont work on browser. test it on a device. it should be working fine.

Upvotes: 0

Related Questions