Ionic 4: how to hide ScrollBar in ion-content

ionic 4 hide scrollbar
ion-scroll example ionic 3
ionic horizontal scroll
ionic scroll event
ion-view ionic 4
ion-fixed
hide scrollbar css
ionic scrollable div

Im trying to hide the scroll-bar in ion-content (Ionic 4) there's no ion-scroll on ionic 4 so I used the ion-content but I can't find any css attribute to hide it (most of them not work)

I do want to scroll but I don't want to see the scrollbar

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

I've tried it but it doesn't work in ion-content.. thanks alot.

In Ionic 4 you must use following, because Ionic use shadow DOM:

global.scss

.no-scroll {
    --overflow: hidden;
}

and in page

<ion-content class="no-scroll">

How to disable scrollbars on ion-content in ionic 4?, If you want to disable the content scrolling in the Y axis, set this property to false . ionScrollEnd for scrolling events and scrollToPoint() to scroll the content into  I have an Angular 2 app wrapped in Ionic 2. I'm using <ion-tabs>, and within each tab is an <ion-content>.The content in this area needs to be scrollable, but Ionic 2 adds a scrollbar that I don't want displayed.

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

ion-content {
  overflow: hidden;
  --overflow: hidden;
}

.scroll-content {
  overflow: hidden;
}
  ion-infinite-scroll.md.infinite-scroll-enabled.hydrated {
      overflow: scroll!important;
      height: 100%!important;
    }

ion-content, I want to disable scroll of ion-content in ionic 4~I tried many ways to use it in ionic2 ionic3,but there is no way to use; Type: bug Ionic Version: 2.x beta.3 Platform: all <ion-content> always contains <scroll-content> which has scroll-content { overflow-y: scroll; } so the vertical scrollbar is always visible in ion-content.

Because of Ionic use shadow DOM for ion-content, should disable scroll in element on shadow DOM and after that make ion-content his own scroll and then hide scroll bar for ion-content. The result's ion-content with the hidden working scroll bar. Need to use CSS Custom Properties. Add styles to global scope.

ion-content {
  // overwrite inline styles
  --offset-bottom: auto!important;
  --overflow: hidden;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}

How to disable scroll of ion-content in ionic 4 · Issue #16596 · ionic , Creates a scrollable container for all content inside. Usage. Basic usage: <ion-​scroll zooming="true" direction="xy" style="width: 500px; height: 500px"> <div  In this Ionic tutorial, we’ll discuss Scroll events and methods available on the ion-content component in the Ionic Framework. These events can be used to Scroll the page to Bottom, Top or to some other coordinate on the screen using the X or Y points.

Thank you @rostislav

Your solution even don't suggested by WebStorm and draw yellow underline in the meaning of warning, but work for me and work, it's awesome :)

solution: add these lines to both global.scss and variables.scss:

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

ion-content {
  overflow: hidden;
  --overflow: hidden;
}

.scroll-content {
  overflow: hidden;
}

NOTIC: then clear browser cache and refresh page, it's great!

but don't forget that scroll disabled in all pages, add this code to only .sccs file of pages that don't need to be scrolled!

ion-scroll - Directive in module ionic, If anyone is still having trouble with this add no-bounce to ion-content and see if that fixes it. For Ionic 1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p​=preview. For Ionic 2 issues ionic ionic2 - vertical scrolling inside of a slide. 60. However, it's recommended to use the API provided by ion-content: i.e. Using ionScroll , ionScrollStart , ionScrollEnd for scrolling events and scrollToPoint() to scroll the content into a certain point.

Here is a hack? https://github.com/ionic-team/ionic/issues/17685

<ion-content>
<div style="background-color: #f2f2f2 !important; height: 100vh; overflow: auto;">
# content here
</div>
</ion-content>

[Solved]ionic How to disable scroll for ion-content in ionic 2?, scss files. How to hide or disable the ion-content scrollbar? For previous versions of Ionic 5 you can use the setScrollDisabled method to  that depends on which element causes the scroll bar. check it using browser debugging tool can change specific class as @PatrickMlr mentioned – Shanil Fernando Jul 4 '17 at 5:06 I have done it for all the places where I can think of.But no luck.One location I have put it with my question.Please see it.@ShanilFernando – Sampath Jul 4 '17 at 5:19

Theming and Styling Ionic 5 Apps: Toolbar and Menu Example , As I was scrolling through Twitter's PWA (I assume this would be the same in Creating a directive in Angular; Utilising Ionic 4 web components in a to the main content area for scroll events and then hide our ion-toolbar  How to hide or disable the ion-content scrollbar? For previous versions of Ionic 5 you can use the setScrollDisabled method to disable the scrollbar but unfortunately starting from Ionic 2.0.0-rc.6 it is no longer available (public), so how to disable the ion-content scrollbar? You can use direct class name. For example:

Creating a Custom Scroll Vanish Directive with Ionic Web , While we recommend using the custom Scroll features in Ionic in most cases, sometimes (for performance reasons) only the browser's native overflow scrolling will  Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards <!--t.4.5.4.0-->Ionic Docs

ion-content, HAH, ok, my bad :) I kept the has-header attribute like i had on ion-content. I could send a pull request for ion-pane that converts the has-header attr to a class, and add a .pane.has-header style that adds the 44px top.

Comments
  • This disables scrolling too, it does not just hide the scroll bar.
  • This worked superbly! And I can't see any scrollbar as well... I spent hours for this in ionic 4 because all scrolling attributes of the previous version were deprecated. Thank you!
  • how can I know to use not 'overflow' but '--overflow'???
  • Please add some explanation to your answer.
  • You should add "scrollbar-width: none;" for Firefox :)
  • Of course, you right if it is firefox. I guess for android and ios uses WebView component is based on the Chromium. That's why it can be missed.
  • This "hack" only works when you aren't using an ion-header or anything else outside ion-content.