[Ionic 4] What is alternative to deprecated 'ion-scroll'

Ionic Framework
1

Before Ionic 4, <ion-scroll> is useful to make a list scroll in fixed area.

But after I checked the repo from Ionic 4, <ion-scroll> seems disappear from core. (it still in Ionic 3 documentation)

So what is possible solution to make <ion-list> scroll in a fix area if we have no <ion-scroll>?

1 Like
2

use div instead of ion-scroll :wink:

and if you are looking for the css to reinfect scrollX and scrollY, here you go:

div[scrollx=true], div[scrolly=true] {
  position: relative;
  overflow: hidden;

  ::-webkit-scrollbar {
    display: none;
  }
}

div[scrollx=true] {
  overflow-x: auto;
}

div[scrolly=true] {
  overflow-y: auto;
}
3 Likes
3

So, is it going this way?

<ion-content>
   <div>
      <!-- some content here -->
   </div>
    <div class="fixed">
        <ion-list>
           ...
        </ion-list>
    </div>
</ion-content>

and CSS is:

.fixed[scrollx=true], div[scrolly=true] {
  position: relative;
  overflow: hidden;

  ::-webkit-scrollbar {
    display: none;
  }
}

.fixed[scrollx=true] {
  overflow-x: auto;
}

.fixed[scrolly=true] {
  overflow-y: auto;
}
4

I do the following with the above css I posted

<div scrollY="true" id="myFixZone">
    <ion-list>
          <ion-item *ngFor...>
          </ion-item>
     </ion-list>
 </div>

#myFixZone {
    height: 200px;
}

UPDATE: yes probably works like you displayed with a scrollX

5

One workaround I used today was to put the fixed content at the end of the ion-header - the idea being that everything below that area would be scrolling anyway and if something at the footer area needs to be fixed as well then it would go in the ion-footer.

2 Likes
6

Thank you for great suggestion! But what I want is putting them in content area. So your solution might work in my future case. Cheer!

1 Like
7

It’s work! Thank you very much.

But can we expand the div for ion-list to fit remaining content’s area?

because the device’s screen might have various sizes, and what I want is just let it fill the remaining area.

here is the code, I am using:

<ion-content padding>

  <!-- it an nice fixed image -->
  <img src="assets/nextflow.png" alt="">

  <!-- let this fill the remaining! -->
  <div scrollY="true" id="myFixZone">
    <ion-list *ngFor="let item of list">
      <ion-item>
        {{ item }}
      </ion-item>
    </ion-list>
  </div>

</ion-content>
8

Probably I mean that’s styling no?

9

Also see the official recommendation which is similar (use ScrollX or scrollY etc with ion-content: https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#scroll

1 Like
10 
<div class="container">
  <div class="scroll" scrollY="true">
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
  </div>
</div>

.container {
  width: 100px;
  background-color: green;
  overflow: hidden; 
  white-space: nowrap;
  ::-webkit-scrollbar {
    display: none;
  }
  
  .scroll {
    overflow: auto;
  }
}
3 Likes
11

Hi,

I want display scroll bar always not for only scrolling time. Is there css for this could you please help me.

12

Hi,

I want display scroll bar always not for only scrolling time. Is there css for this could you please help me.

13

@reedrichards This help in making the element scroll but how do we can scroll to a particular element ? As scrollTo property is not working here.

14

If you are not happy with the features you could always use javascript like https://www.w3schools.com/jsref/met_element_scrollintoview.asp

15

Using flexbox for a horizontal scroller:

div[scrollx=true] {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  &::-webkit-scrollbar {
     display: none;
  }
   .scroll-item {
     flex: 0 0 auto;
  }
}
2 Likes
16

but u can’t get it as a scroll view, that just moves the items to next row

17

Works for me! Thanks!

1 Like
18

save my day. thanks!

19

this work perfectly for me

20

Best solution ever for ionic 5, thanks man