Ionic / hide scrollbar iOS

[ghost]

Hi guys,
I used ionic with this fantastic virtual scroll.

I've a issue with iOS, i don't know how to hide the vertical scrollbar.

In all the other pages I do not see it, only here where it's angular2-virtual-scroll.

This's my source code:
list.ts
<ion-content #content (ionScroll)="onContentScroll($event)" no-bounce> <ion-refresher (ionRefresh)="doRefresh($event)"> <ion-refresher-content></ion-refresher-content></ion-refresher> <virtual-scroll #virtualScroll class="resort-details-list sumbrella-list" [items]="sunbrellaData" [bufferAmount]="50" childHeight="190" [parentScroll]="content && content._elementRef.nativeElement.querySelector('.scroll-content')"> <sunbrellas *ngFor="let sunbrella of sunbrellaData" [sunbrellaData]="sunbrella" (onClick)="goToResortInfoPage($event)" [searchSunbrella]="isSearchSunbrella"></sunbrellas> </virtual-scroll> </ion-content>

list.scss
.scroll-content { overflow-y: auto !important; }

Can you help me please?

[flamders]

Relates to -webkit-overflow-scrolling: touch; i think. I just removed it (working on a fork). Non standard: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

[ghost]

I tried with:

.scroll-content { -webkit-overflow-scrolling: touch !important; }

But I still see the scrollbar on iOS. :(

[speige]

I don't believe a universal css property exists to hide scrollbars. However, I think there are browser-specific css tricks (or prefixes), but they're not well supported across different versions of that same browser & not all browsers even have the option at all. Also, in some cases hiding the scroll bar this way actually completely disables scrolling. Probably not a good solution, but if you only have issues with ios maybe you can find something that works. Google should help here.

The best universal solution I've seen before was from stackoverflow (i think). It basically put a 25px padding on the child element & a -25px margin on the parent element. Essentially "hack" this made the scrollbar invisible in every browser & still allowed scrolling, 25px is a "magic" number, but it works well enough for most devices/browsers scrollbar size. This hack can cause minor issues with other surrounding or sibling elements positioning due to the -25px margin, but in most cases it works great.

Not a perfect solution, but maybe a workaround. Hope that helps.

[speige]

Closing this because it doesn't appear to be a specific issue to virtual-scroll component, but rather a general HTML/CSS issue that would be better supported by stackoverflow/etc. Please re-open if you disagree.

[speige]

.hideVerticalScrollbar {
   margin-right: -25px;
   padding-right: 25px;
}
.hideHorizontalScrollbar {
   margin-bottom: -25px;
   padding-bottom: 25px;
}

[adils-oslomet]

Hi @andreandev,
Add this to your app/app.scss . It will disappear whole app. If you want to specific page, just add this code your page’s scss file. I suggest to you don’t open topic before google searching.

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

[Yuanfang-fe]

i find a way to hide ios safari scrollbar, but i don't know why.
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
color: fff;
height: 0;
}

to add 'color' with error value can effect for me

[PriimeTime]

Unfortunately none of the solutions you posted works as of 21st Jan 2020

[shkumbinhasani]

Unfortunately none of the solutions you posted works as of 21st April 2021

[buligadragos]

I found this.
https://developer.apple.com/forums/thread/670065

[intellix]

Hi @andreandev, Add this to your app/app.scss . It will disappear whole app. If you want to specific page, just add this code your page’s scss file. I suggest to you don’t open topic before google searching.

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

I arrived here via Google so please stop suggesting people to search before opening a topic if it helps people. It drives me insane